Blazor HttpClient 附加 JWT Token 的方法

admin 百科 2025-12-14 18

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

Blazor HttpClient 附加 JWT Token 的方法-第1张图片-佛山资讯网

在 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<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        var token = await _jsRuntime.InvokeAsync<string>("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<AuthorizationMessageHandler>();
builder.Services.AddHttpClient<IApiService, ApiService>()
    .AddHttpMessageHandler<AuthorizationMessageHandler>()
    .ConfigureHttpClient(client =>
    {
        client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
    });

登录后复制

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

标签： js 浏览器 ai 作用域