Blazor 怎么给 HTTP 请求添加认证头

admin 百科 2025-12-13 10

Blazor中HTTP认证头配置核心是按场景选择方式：WASM推荐用DelegatingHandler动态注入Bearer Token，Server端通常无需前端加头。

Blazor 怎么给 HTTP 请求添加认证头-第1张图片-佛山资讯网

在 Blazor 中给 HTTP 请求添加认证头，核心是配置 HttpClient 实例，使其自动携带如 Authorization: Bearer xxx 这样的请求头。具体方式取决于你用的是 Blazor WebAssembly（WASM）还是 Blazor Server，但主流和推荐做法集中在 WASM 场景——因为 Server 端通常走服务端身份验证（如 Cookie 或 JWT 在服务端验证），前端无需手动加头。

Blazor WebAssembly：用自定义 DelegatingHandler 注入认证头

这是最灵活、推荐的方式，尤其适合使用 JWT 的场景。你创建一个继承自 DelegatingHandler 的类，在 SendAsync 中读取当前用户 Token 并添加到请求头中。

先确保已通过 AuthenticationStateProvider 获取登录状态和 Token（比如从本地存储或 IdentityServer 登录后缓存）
新建一个 AuthHeaderHandler.cs：

public class AuthHeaderHandler : DelegatingHandler
{
    private readonly NavigationManager _navigation;
    private readonly IJSRuntime _jsRuntime;

    public AuthHeaderHandler(NavigationManager navigation, IJSRuntime jsRuntime)
    {
        _navigation = navigation;
        _jsRuntime = jsRuntime;
    }

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

        return await base.SendAsync(request, cancellationToken);
    }
}

登录后复制

在 Program.cs（或 Startup.cs）中注册该 handler，并配置命名的 HttpClient：

builder.Services.AddTransient<AuthHeaderHandler>();
builder.Services.AddHttpClient("AuthenticatedClient", client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
})
.ConfigurePrimaryHttpMessageHandler(() => new AuthHeaderHandler(
    builder.Services.GetRequiredService<NavigationManager>(),
    builder.Services.GetRequiredService<IJSRuntime>()));

登录后复制

在组件中注入并使用：

@inject IHttpClientFactory HttpClientFactory

@code {
    private async Task LoadData()
    {
        var client = HttpClientFactory.CreateClient("AuthenticatedClient");
        var response = await client.GetAsync("api/values");
        // ...
    }
}

登录后复制

Blazor WebAssembly：直接设置 HttpClient.DefaultRequestHeaders（简单但不推荐）

适用于 Token 固定、且整个应用生命周期内不会变更的极简场景（比如测试用）。它会污染全局默认头，不适合多用户或 Token 动态刷新的场景。

在 Program.cs 初始化时设置：

var httpClient = new HttpClient();
httpClient.DefaultRequestHeaders.Authorization = 
    new AuthenticationHeaderValue("Bearer", "your-jwt-token-here");

登录后复制

然后注册为单例：

builder.Services.AddSingleton(sp => httpClient);

登录后复制

注意：这种方式无法动态更新 Token，也不支持异步获取（比如从 JS 或 AuthState 获取），仅作快速验证用。

配合 AuthenticationStateProvider 动态刷新 Token

真实项目中 Token 可能过期或需要刷新。你需要让 AuthHeaderHandler 能响应认证状态变化。

标签： js 前端 cookie 浏览器后端 ai microsoft 跨域 .net red

本文地址： https://www.fsgp.cn/p/baike/55725.html