Blazor客户端应用中为所有请求添加JWT Bearer令牌

Blazor WebAssembly完全支持类似Angular/Svelte的请求拦截机制，无需自定义完整的Http服务，通过DelegatingHandler即可实现对HttpClient请求的拦截与修改。以下是极简的实现示例，仅专注于给请求附加JWT Token并跳过特定请求：

1. 创建自定义请求拦截处理器 #

using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.JSInterop;

// 自定义请求拦截处理器，负责添加JWT Token到请求头
public class JwtAuthorizationHandler : DelegatingHandler
{
    private readonly IJSRuntime _jsRuntime;

    // 无需附加Token的请求路径（比如获取Token的认证接口）
    private readonly string[] _excludedPaths = { "/api/auth/login", "/api/auth/register" };

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

    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, 
        CancellationToken cancellationToken)
    {
        // 检查当前请求是否属于排除列表
        var requestPath = request.RequestUri?.AbsolutePath;
        if (!_excludedPaths.Any(path => requestPath?.StartsWith(path) == true))
        {
            // 从本地存储读取JWT Token
            var jwtToken = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", "authToken");

            if (!string.IsNullOrEmpty(jwtToken))
            {
                // 添加Authorization请求头
                request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", jwtToken);
            }
        }

        // 传递请求到下一个处理器
        return await base.SendAsync(request, cancellationToken);
    }
}

2. 在Program.cs中注册处理器并配置HttpClient #

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

// 注册自定义拦截处理器
builder.Services.AddScoped<JwtAuthorizationHandler>();

// 配置带拦截器的命名HttpClient（推荐用于API请求）
builder.Services.AddHttpClient("ApiClient", client =>
{
    client.BaseAddress = new Uri("https://your-api-domain.com/");
})
.AddHttpMessageHandler<JwtAuthorizationHandler>();

// 若需要全局默认HttpClient，也可直接配置
builder.Services.AddHttpClient()
.AddHttpMessageHandler<JwtAuthorizationHandler>();

await builder.Build().RunAsync();

3. 在组件中使用HttpClient #

@inject HttpClient Http

<button @onclick="FetchData">获取数据</button>

@code {
    private async Task FetchData()
    {
        // 发起的请求会自动携带JWT Token（排除路径除外）
        var response = await Http.GetFromJsonAsync<YourDataModel>("/api/data/list");
        // 处理返回数据
    }
}

注意事项 #

• 登录成功后，需将后端返回的JWT Token存入本地存储：await _jsRuntime.InvokeVoidAsync("localStorage.setItem", "authToken", "your-jwt-token");
• 若使用第三方本地存储库（如Blazored.LocalStorage），可替换IJSRuntime调用为对应服务，提升类型安全性
• 可根据实际需求修改_excludedPaths数组，调整无需携带Token的请求范围

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