Blazor HttpClient 附加 JWT Token 的方法_技术教程

最推荐的方式是使用自定义 DelegatingHandler（如 AuthorizationMessageHandler）配合 IJSRuntime 读取 localStorage 中的 JWT Token 并自动添加到 Authorization 请求头，再通过 Program.cs 正确注册命名 HttpClient 并注入该 handler，实现一次配置、全局生效。

在 Blazor（尤其是 Blazor WebAssembly）中，为 HttpClient 自动附加 JWT Token 最常用、最推荐的方式是使用 自定义 DelegatingHandler，配合 IJSRuntime 读取本地存储的 token（如 localStorage），再注入到每个请求的 Authorization 头中。

1. 创建带 Token 的 HttpClient Handler

新建一个继承自 DelegatingHandler 的类，例如 AuthorizationMessageHandler：

public class AuthorizationMessageHandler : DelegatingHandler
{
    private readonly IJSRuntime _jsRuntime;

    public AuthorizationMessageHandler(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    protected override async Task SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        var token = await _jsRuntime.InvokeAsync("localStorage.getItem", "authToken");
        if (!string.IsNullOrEmpty(token))
        {
            request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token);
        }
        return await base.SendAsync(request, cancellationToken);
    }
}

这个 handler 会在每次 HTTP 请求发出前，从浏览器 localStorage 中读取 token 并添加到请求头。

2. 在 Program.cs 中注册并配置 HttpClient

在 Blazor WebAssembly 的 Program.cs 中，注册该 handler，并将其注入到命名的 HttpClient：

builder.Services.AddScoped();
builder.Services.AddHttpClient()
    .AddHttpMessageHandler()
    .ConfigureHttpClient(client =>
    {
        client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
    });

注意：不要直接注册无名的 HttpClient（如 AddHttpClient），否则可能干扰框架默认客户端；推荐为 API 服务创建专用接口+实现，或使用命名客户端。

3. Token 存储与刷新时机要匹配

确保 token 已正确存入 localStorage，且在登录成功后及时写入：

登录成功后调用 JS： await jsRuntime.InvokeVoidAsync("localStorage.setItem", "authToken", token);
登出时务必清除：await jsRuntime.InvokeVoidAsync("localStorage.removeItem", "authToken");
若 token 有过期时间，可在 AuthorizationMessageHandler 中加一层校验（比如解析 JWT payload 判断 exp），但更推荐由上层逻辑统一管理 token 刷新流程