.NET Angular模板SPA全资源授权配置问题

1. 后端路由与授权配置 #

在Program.cs中调整中间件顺序，为SPA静态资源和入口页面添加强制授权，同时保留OAuth2回调路径的匿名访问权限：

var builder = WebApplication.CreateBuilder(args);

// 配置身份验证服务（适配OAuth2）
builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
})
.AddCookie()
.AddOpenIdConnect(options =>
{
    // 填入你的OAuth2服务器配置信息
    options.Authority = "https://your-oauth2-server-domain";
    options.ClientId = "your-client-id";
    options.ClientSecret = "your-client-secret";
    options.ResponseType = "code";
    options.Scope.Add("openid");
    options.Scope.Add("profile");
    options.SaveTokens = true;
});

builder.Services.AddAuthorization();

var app = builder.Build();

app.UseHttpsRedirection();

// 拦截静态资源请求，强制验证用户身份
app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        // 禁止浏览器缓存未授权资源
        ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
        ctx.Context.Response.Headers.Append("Pragma", "no-cache");
        ctx.Context.Response.Headers.Append("Expires", "0");

        // 未认证用户触发OAuth2跳转
        if (!ctx.Context.User.Identity.IsAuthenticated)
        {
            ctx.Context.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme);
        }
    }
});

// 加载认证与授权中间件
app.UseAuthentication();
app.UseAuthorization();

// SPA入口页面强制授权
app.MapFallbackToFile("index.html").RequireAuthorization();

// 允许OAuth2回调路径匿名访问（必须配置，否则授权流程失败）
app.MapPath("/signin-oidc").AllowAnonymous();
app.MapPath("/signout-callback-oidc").AllowAnonymous();

app.Run();

2. 前端路由守卫兜底（可选） #

在Angular中添加路由守卫，进一步确保未认证用户无法访问前端路由：

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    }
    // 兜底触发后端跳转逻辑
    window.location.href = '/';
    return false;
  }
}

在路由模块中应用守卫：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  // 其他所有路由均添加canActivate守卫
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3. 关键注意事项 #

• 中间件顺序：UseStaticFiles必须放在UseAuthentication和UseAuthorization之前，确保静态资源请求先经过身份验证。
• 回调路径权限：/signin-oidc和/signout-callback-oidc必须设为匿名访问，否则OAuth2授权回调流程会被拦截。
• 缓存控制：添加Cache-Control头避免浏览器缓存未授权资源，确保每次请求都经过后端验证。

内容的提问来源于stack exchange，提问作者Bluebaron