Blazor WASM中IHttpClientFactory创建的HttpClient缺失JWT令牌

问题背景 #

我有一个Blazor客户端应用，需要与两个API服务通信：

• 身份验证API服务器：https://localhost:7031/api/...（处理登录/注册，已配置JWT身份验证）
• Blazor宿主服务器API：https://localhost:7030

现有问题：

• 直接注入的HttpClient能正常携带授权令牌，但通过IHttpClientFactory创建的命名HttpClient（包括IdentityApi和BaseApi）的DefaultRequestHeaders均为null，无法自动携带令牌。
• 尝试自定义AuthorizationMessageHandler时，抛出依赖注入异常：无法解析Microsoft.AspNetCore.Components.WebAssembly.Authentication.IAccessTokenProvider服务。

解决方案 #

1. 确认依赖包安装 #

确保项目已安装Microsoft.AspNetCore.Components.WebAssembly.Authentication NuGet包，这是使用IAccessTokenProvider的核心依赖。

2. 注册身份验证消息处理器并绑定命名HttpClient #

在Program.cs中，先注册AuthorizationMessageHandler，再将其关联到需要携带令牌的命名HttpClient：

// 注册AuthorizationMessageHandler，配置允许的API地址和令牌作用域
builder.Services.AddScoped<AuthorizationMessageHandler>(sp =>
{
    var handler = sp.GetRequiredService<AuthorizationMessageHandler>()
        .ConfigureHandler(
            authorizedUrls: new[] { "https://localhost:7031", "https://localhost:7030" },
            scopes: new[] { "your-api-scope" }); // 替换为实际API作用域，无作用域可留空数组

    return handler;
});

// 注册带令牌的IdentityApi客户端
builder.Services.AddHttpClient("IdentityApi", client =>
{
    client.BaseAddress = new Uri("https://localhost:7031");
})
.AddHttpMessageHandler<AuthorizationMessageHandler>();

// 注册带令牌的BaseApi客户端
builder.Services.AddHttpClient("BaseApi", client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
})
.AddHttpMessageHandler<AuthorizationMessageHandler>();

3. 组件中正确使用命名HttpClient #

在Razor组件中注入IHttpClientFactory，创建的客户端会自动携带JWT令牌：

@inject IHttpClientFactory HttpClientFactory

@code {
    protected override async Task OnInitializedAsync()
    {
        var identityClient = HttpClientFactory.CreateClient("IdentityApi");
        var baseClient = HttpClientFactory.CreateClient("BaseApi");

        // 请求会自动添加Authorization: Bearer {token}头
        var identityResult = await identityClient.GetFromJsonAsync<YourModel>("/api/auth/test");
        var baseResult = await baseClient.GetFromJsonAsync<AnotherModel>("/api/data");
    }
}

4. 解决IAccessTokenProvider注入异常 #

若仍出现该异常，检查Program.cs是否正确配置了Blazor身份验证服务：

// 若使用默认API授权方案
builder.Services.AddApiAuthorization();

// 若自定义JWT配置，需手动注册IAccessTokenProvider实现
builder.Services.AddScoped<IAccessTokenProvider, CustomAccessTokenProvider>();

关键说明 #

• AuthorizationMessageHandler会自动从IAccessTokenProvider获取有效令牌，并添加到请求的Authorization头中。
• 每个需要携带令牌的命名HttpClient必须调用.AddHttpMessageHandler<AuthorizationMessageHandler>()完成绑定。
• 直接注入的HttpClient能自动携带令牌，是因为Blazor默认会为其关联身份验证消息处理器，而命名客户端需要手动配置。

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