Blazor WebAssembly（服务端+客户端）JWT认证失效问题排查

问题拆解与核心原因 #

你遇到的核心矛盾是：混合模式下（InteractiveServer + InteractiveWebAssembly），服务端的[Authorize]特性依赖ASP.NET Core认证系统的基础服务，但你的自定义CustomAuthenticationStateProvider并未与服务端认证配置协同，导致要么因缺失认证方案报错，要么因认证状态不匹配返回404。

1. 为何必须配置认证方案（比如AddJwtBearer）？ #

不是必须用JwtBearer，但服务端的[Authorize]特性强制依赖IAuthenticationService，而这个服务必须通过AddAuthentication()注册至少一个认证方案才能初始化。你之前用AddJwtBearer只是凑够了依赖，但因为你的CustomAuthenticationStateProvider和JwtBearer方案的验证逻辑不匹配（你不需要服务端验证JWT），导致授权逻辑混乱，返回404。

你完全可以用一个虚拟认证方案替代JwtBearer，不需要实际验证令牌，只需要满足服务端认证系统的依赖即可。

2. 当前服务配置的问题 #

服务端问题：

• 错误使用AddAuthorizationCore()：这是纯客户端WASM的轻量授权服务，混合模式下服务端需要完整的AddAuthorization()来支持服务端渲染的授权逻辑。
• AddJwtBearer配置与自定义认证状态提供者不协同：服务端会尝试用JwtBearer验证请求，但你的CustomAuthenticationStateProvider已经负责提供认证状态，两者冲突导致授权失败。

客户端问题：

• 配置基本正确，但需确保CustomAuthenticationStateProvider正确实现了从LocalStorage读取JWT并生成ClaimsPrincipal的逻辑。

3. 缺失的关键配置 #

• 服务端替换轻量授权为完整授权服务
• 配置虚拟认证方案替代JwtBearer，满足IAuthenticationService依赖
• 配置未认证时的重定向路径，避免返回404
• 确保服务端与客户端的CustomAuthenticationStateProvider逻辑一致（服务端可从请求头获取令牌，客户端从LocalStorage获取）

具体修复步骤 #

服务端Program.cs修改 #

1. 替换AddAuthorizationCore()为完整授权服务：

// 移除 builder.Services.AddAuthorizationCore();
builder.Services.AddAuthorization(options =>
{
    // 可选：配置默认授权策略，强制所有页面需要认证（可根据需求调整）
    options.FallbackPolicy = new AuthorizationPolicyBuilder()
        .RequireAuthenticatedUser()
        .Build();
});

2. 移除AddJwtBearer，添加虚拟认证方案：
   首先创建一个空的认证处理器（不需要任何验证逻辑）：

public class CustomAuthenticationHandler : AuthenticationHandler<AuthenticationSchemeOptions>
{
    public CustomAuthenticationHandler(IOptionsMonitor<AuthenticationSchemeOptions> options, ILoggerFactory logger, UrlEncoder encoder, ISystemClock clock) 
        : base(options, logger, encoder, clock)
    {
    }

    protected override Task<AuthenticateResult> HandleAuthenticateAsync()
    {
        // 仅满足服务端认证系统依赖，实际认证状态由CustomAuthenticationStateProvider提供
        var identity = new ClaimsIdentity();
        var principal = new ClaimsPrincipal(identity);
        var ticket = new AuthenticationTicket(principal, Scheme.Name);
        return Task.FromResult(AuthenticateResult.Success(ticket));
    }
}

然后在Program.cs中注册该方案：

builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = "CustomScheme";
    options.DefaultChallengeScheme = "CustomScheme";
})
.AddScheme<AuthenticationSchemeOptions, CustomAuthenticationHandler>("CustomScheme", options => { });

3. 确保中间件顺序正确，并配置未认证重定向：

app.UseHttpsRedirection();
app.UseAntiforgery();
app.MapStaticAssets();

// 认证授权中间件必须在组件路由之前
app.UseAuthentication();
app.UseAuthorization();

// 配置组件路由，并添加未认证重定向逻辑
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(OctuFit.Web.Client._Imports).Assembly);

// 添加登录页面路由（根据你的实际登录页面路径调整）
app.Map("/login", () => Results.Redirect("/Account/Login"));

客户端CustomAuthenticationStateProvider优化 #

确保正确从LocalStorage读取JWT并生成认证状态：

public class CustomAuthenticationStateProvider : AuthenticationStateProvider
{
    private readonly ILocalStorageService _localStorage;

    public CustomAuthenticationStateProvider(ILocalStorageService localStorage)
    {
        _localStorage = localStorage;
    }

    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var token = await _localStorage.GetItemAsync<string>("jwt_token");
        if (string.IsNullOrEmpty(token))
        {
            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
        }

        // 解析JWT生成Claims
        var handler = new JwtSecurityTokenHandler();
        var jwtToken = handler.ReadJwtToken(token);
        var claims = jwtToken.Claims.ToList();
        // 指定认证类型为"jwt"，与服务端逻辑对齐
        var identity = new ClaimsIdentity(claims, "jwt");
        var principal = new ClaimsPrincipal(identity);

        return new AuthenticationState(principal);
    }

    // 登录/登出后调用此方法更新认证状态
    public void UpdateAuthenticationState()
    {
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }
}

混合模式认证核心要点 #

1. 客户端：负责从LocalStorage读取JWT，生成认证状态，通过CustomAuthenticationStateProvider提供给Blazor组件。
2. 服务端：仅需满足认证系统的基础依赖（虚拟认证方案），服务端渲染的组件会通过CustomAuthenticationStateProvider获取认证状态（若服务端需要验证令牌，可从请求头读取JWT并解析）。
3. 未认证处理：必须配置登录页面路由，否则[Authorize]页面会因挑战认证方案失败返回404。

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