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

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

blazor 怎么给 http 请求添加认证头

在 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 SendAsync(        HttpRequestMessage request, CancellationToken cancellationToken)    {        var token = await _jsRuntime.InvokeAsync("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();builder.Services.AddHttpClient("AuthenticatedClient", client =>{    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);}).ConfigurePrimaryHttpMessageHandler(() => new AuthHeaderHandler(    builder.Services.GetRequiredService(),    builder.Services.GetRequiredService()));

在组件中注入并使用:

@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 能响应认证状态变化。

在 AuthHeaderHandler 中注入 AuthenticationStateProvider 调用 GetAuthenticationStateAsync() 获取当前用户,并从中提取 Token(例如从 User.FindFirst("token")?.Value) 如果使用 Microsoft.AspNetCore.Components.WebAssembly.Authentication 包(如 RemoteAuthenticationState),Token 通常已封装在 user.Identity 或自定义声明中

这样每次发请求前都会拉取最新认证状态,天然支持登录/登出/Token 刷新后的自动同步。

Blazor Server:一般不需要前端加认证头

Blazor Server 是服务端渲染,HTTP 请求由服务器发出(比如用 HttpClient 调后端 API),此时认证通常靠服务端 Cookie 或服务间 Token,前端组件本身不发跨域请求。若需调用外部 API,应在服务端完成认证(如用 IHttpClientFactory + AddHttpMessageHandler),而非在 Razor 组件里操作请求头。

如果你在 Blazor Server 中用了 JSInterop 发起浏览器原生 fetch,则可按 JS 方式加头(如 headers: { 'Authorization': 'Bearer ...' }),但这属于前端 JS 行为,不属于 Blazor 的 .NET HTTP 生态。

基本上就这些。关键是选对模式:WASM 推荐 DelegatingHandler + AuthenticationStateProvider;Server 场景尽量避免前端发带认证的请求;所有 Token 存储与读取都要注意安全性(避免 XSS 泄露 localStorage)。

以上就是Blazor 怎么给 HTTP 请求添加认证头的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1442971.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Blazor 怎么发起 HTTP 请求
上一篇 2025年12月17日 19:34:17
ASP.NET Core怎么进行身份验证和授权 JWT认证实现教程
下一篇 2025年12月17日 19:34:36

相关推荐

发表回复

登录后才能评论
关注微信