Blazor 8 SSR+WebAssembly集成JWT认证：401错误未跳转登录页

尝试将公司的JWT认证集成到新版Blazor（SSR + WebAssembly）模板中，遇到瓶颈：带有[Authorize]特性的WebAssembly客户端页面会触发浏览器401错误，而非自动跳转到服务端的登录页面。RedirectToLogin组件的OnInitialized方法从未执行，无法完成跳转。

现有配置代码 #

路由配置 #

<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client.IClientMarker).Assembly }">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)">
            <NotAuthorized>
                <RedirectToLogin />
            </NotAuthorized>
        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

RedirectToLogin.cs代码 #

protected override void OnInitialized()
{
    NavigationManager.NavigateTo("Auth/Login");
}

Program.cs认证相关配置 #

...
builder.Services.AddAuthorization();
builder.Services.AddAuthentication(x =>
{
    x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    x.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    x.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
}).AddJwtBearer(x =>
{
    x.TokenValidationParameters = new TokenValidationParameters
    {
        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(config["Jwt:Key"]!)),
        ValidateIssuerSigningKey = true,
        ValidateLifetime = true,
        ValidIssuer = config["Jwt:Issuer"],
        ValidAudience = config["Jwt:Audience"],
        ValidateIssuer = true,
        ValidateAudience = true
    };
});

...
app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseAuthentication();
app.UseAuthorization();

app.UseAntiforgery();
...

错误截图 #

1. 修正认证Scheme配置
   当前把DefaultChallengeScheme设为JWT Bearer，而JWT Bearer仅返回401响应，无法触发登录跳转。需将默认挑战方案改为Cookie认证（适配服务端跳转逻辑）：

builder.Services.AddAuthentication(x =>
{
    x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    x.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme; 
    x.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(x =>
{
    // 保留原有JWT验证参数
    x.TokenValidationParameters = new TokenValidationParameters
    {
        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(config["Jwt:Key"]!)),
        ValidateIssuerSigningKey = true,
        ValidateLifetime = true,
        ValidIssuer = config["Jwt:Issuer"],
        ValidAudience = config["Jwt:Audience"],
        ValidateIssuer = true,
        ValidateAudience = true
    };
})
.AddCookie(); // 添加Cookie认证用于处理登录跳转

2. 同步WASM客户端认证配置
   在WASM客户端的Program.cs中添加认证支持，确保客户端能识别认证状态并处理跳转：

// 若使用OIDC登录
builder.Services.AddOidcAuthentication(options =>
{
    options.ProviderOptions.Authority = "你的认证服务地址";
    options.ProviderOptions.ClientId = "客户端ID";
});

// 若手动处理JWT，添加HTTP拦截器拦截401请求
builder.Services.AddScoped(sp => new HttpClient
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
}.AddHttpMessageHandler<AuthorizationMessageHandler>());

builder.Services.AddScoped<AuthorizationMessageHandler>(sp =>
{
    var handler = sp.GetRequiredService<AuthorizationMessageHandler>()
        .ConfigureHandler(authorizedUrls: new[] { builder.HostEnvironment.BaseAddress });
    return handler;
});

3. 修复RedirectToLogin组件逻辑
   原OnInitialized可能在SSR阶段执行，无法触发客户端跳转。修改为：

protected override async Task OnInitializedAsync()
{
    // 仅在浏览器环境（WASM客户端）执行跳转
    if (!OperatingSystem.IsBrowser()) return;
    
    var returnUrl = Uri.EscapeDataString(NavigationManager.Uri);
    // 使用forceLoad强制触发服务端路由处理
    NavigationManager.NavigateTo($"Auth/Login?returnUrl={returnUrl}", forceLoad: true);
}

4. 确认路由与中间件顺序

• 确保Auth/Login路由已在服务端正确注册，能被路由系统匹配到。
• 中间件顺序需保持：UseHttpsRedirection → UseStaticFiles → UseAuthentication → UseAuthorization → UseAntiforgery

内容的提问来源于stack exchange，提问作者E-Bat