Blazor HttpClient 附加 JWT Token 的方法

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

blazor httpclient 附加 jwt token 的方法

在 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 刷新流程

4. 可选:支持多租户或动态 BaseAddress 场景

如果应用需对接多个 API 域名,可扩展 handler 构造函数,传入作用域标识或配置项,再按需决定是否附加 token 或附加到哪个请求:

通过 Named HttpClient 分离不同 API 客户端 在 handler 中检查 request.RequestUri.Host,只对特定域名附加 token 避免把敏感 token 泄露到不信任的第三方接口

基本上就这些。核心是 handler + localStorage + 正确注册顺序。不需要手动在每个 service 方法里加 header,也不依赖组件生命周期——真正做到了“一次配置,全局生效”。

以上就是Blazor HttpClient 附加 JWT Token 的方法的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月17日 19:42:18
下一篇 2025年12月13日 11:39:09

相关推荐

  • ASP.NET Core怎么部署到IIS ASP.NET Core发布应用程序方法

    ASP.NET Core 应用部署到IIS的核心是IIS通过ANCM反向代理请求至Kestrel服务器。需确保安装Hosting Bundle、正确发布应用、配置IIS站点(应用程序池设为“无托管代码”)、验证web.config生效,最后通过日志排查500.19/502.5错误。 ASP.NET …

    2025年12月17日
    000
  • C#如何实现链式调用 Fluent API设计与实现教程

    链式调用是通过方法返回当前或新对象实现连续点号调用的API设计风格,如builder.SetName().SetAge().Build(),核心在于返回this、语义明确与阶段可控。 什么是链式调用与Fluent API 链式调用是指方法调用后返回当前对象(this)或新构建的对象,从而支持连续点号…

    2025年12月17日
    000
  • Blazor 怎么使用 IndexedDB

    Blazor 通过 JavaScript 互操作调用 IndexedDB,需在 JS 中封装 initDb、add、get 等方法并返回 Promise,C# 端用 IndexedDbService 封装调用,注意版本升级、事务短暂、错误监听及存储限制。 Blazor 本身不直接提供 Indexed…

    2025年12月17日
    000
  • C#怎么解析JSON字符串 C#使用Newtonsoft.Json库教程

    C#中解析JSON最常用的是Newtonsoft.Json,它比System.Text.Json更灵活,支持复杂嵌套、自定义序列化等;需通过NuGet安装并引用using Newtonsoft.Json;,可用JObject动态解析或DeserializeObject反序列化为强类型对象,注意大小写…

    2025年12月17日
    000
  • C#怎么连接PostgreSQL数据库 C# Npgsql驱动使用方法

    最主流稳定的方式是使用 Npgsql 驱动,它支持 async/await、EF Core、连接池和 SSL 加密;通过 NuGet 安装,用 NpgsqlConnection 连接,推荐参数化查询与合理配置连接字符串。 用 C# 连 PostgreSQL,最主流、最稳定的方式就是用 Npgsql …

    2025年12月17日
    000
  • Blazor 怎么优化性能

    Blazor性能优化需从实际瓶颈出发,包括减少渲染、降低JS互操作开销、控制组件生命周期及提升资源加载效率;具体措施有:用@key稳定列表、重写ShouldRender()、拆分组件、防抖JS调用、启用AOT编译与代码剪裁等。 Blazor 性能优化核心在于减少不必要的渲染、降低 JS 互操作开销、…

    2025年12月17日
    000
  • Blazor AuthenticationStateProvider 使用教程

    AuthenticationStateProvider是Blazor中广播用户认证状态的核心服务,需继承并重写GetAuthenticationStateAsync(),调用NotifyAuthenticationStateChanged通知UI更新,注册为Scoped(Server)或Single…

    2025年12月17日
    000
  • EF Core如何自定义表名和列名 EF Core ToTable和HasColumnName方法

    EF Core 中通过 ToTable 和 HasColumnName 自定义表名与列名,优先级高于约定;ToTable 支持指定表名、架构及分表,HasColumnName 用于适配下划线命名、关键字等场景,二者均需在 OnModelCreating 中配置。 EF Core 中自定义表名和列名,…

    2025年12月17日
    000
  • C#怎么实现一个简单的Web服务器 C# HttpListener使用方法

    HttpListener 是 C# 原生轻量 Web 服务器方案,无需 IIS 或 Kestrel,支持 .NET Framework 和 .NET 5+;需管理员权限注册 URL 前缀(如 http://localhost:8080/),核心步骤为创建监听器、添加前缀、调用 GetContext(…

    2025年12月17日
    000
  • Blazor 怎么操作浏览器本地存储

    Blazor 操作浏览器本地存储需通过 JS Interop,WASM 和 Server 均依赖此机制;推荐使用 Blazored.LocalStorage 封装库,支持强类型异步操作;也可手动实现 JS Interop;localStorage 持久共享,sessionStorage 仅限当前标签…

    2025年12月17日
    000
  • Blazor 动态修改 CSS 自定义属性的方法

    Blazor中动态修改CSS自定义属性需通过JS Interop调用style.setProperty(),全局变量设在document.documentElement,局部变量作用于ElementReference;需手动调用StateHasChanged响应逻辑变化,并注意SSR兼容性与性能优化…

    2025年12月17日
    000
  • Blazor 怎么将 Razor Class Library (RCL) 用作组件库

    Blazor中RCL作为组件库的核心是隔离、正确引用和静态资源处理:创建无宿主依赖的Razor组件,通过项目引用并在_Imports.razor中导入命名空间;静态资源放入RCL的wwwroot,构建时自动复制至_content/{RCLName}/路径。 Blazor 中将 Razor Class…

    2025年12月17日
    000
  • Blazor EventCallback 与 Action/Func 的区别和用法

    EventCallback 是 Blazor 专用于子组件向父组件发起异步回调通知的线程安全委托包装器,自动处理 UI 线程同步与状态刷新;Action/Func 是通用委托,无 Blazor 运行时语义,调用后不会触发自动渲染。 Blazor 中的 EventCallback 不是普通委托,而是专…

    2025年12月17日
    000
  • C# 如何使用MediatR库 – 实现CQRS模式中的命令和查询

    CQRS将操作分为命令与查询,MediatR通过中介者模式实现解耦,提升系统可维护性与扩展性,适用于复杂业务场景。 在现代C#应用程序开发中,CQRS(命令查询职责分离)模式被广泛用于提升系统可维护性和可扩展性。MediatR 是一个轻量级库,帮助我们在项目中轻松实现这一模式。它通过中介者模式将请求…

    2025年12月17日
    000
  • Blazor IDisposable 接口实现资源清理

    Blazor组件必须实现IDisposable以释放非托管资源,如Timer、事件订阅、WebSocket等;应在Dispose()中判空调用Dispose(),避免StateHasChanged()和await异步操作。 Blazor 组件实现 IDisposable 是为了在组件被销毁前及时释放…

    2025年12月17日
    000
  • Blazor Streaming Rendering 使用教程

    Blazor Streaming Rendering是.NET 8引入的流式渲染优化,通过@stream指令分块推送渲染结果,提升长列表和实时数据场景的响应体验。 Blazor Streaming Rendering(流式渲染)是 .NET 8 引入的一项关键优化,用于提升 Blazor Serve…

    2025年12月17日
    000
  • Blazor WebAssembly 和 Blazor Server 混合应用怎么做

    Blazor混合应用本质是共享代码+分离宿主,需通过Shared类库共用组件与逻辑,WASM与Server项目独立部署并适配差异,不可单项目切换渲染模式。 Blazor WebAssembly 和 Blazor Server 混合应用不是官方直接支持的“单项目双托管模式”,但可以通过合理架构设计,在…

    2025年12月17日
    000
  • Blazor 组件化 CSS 作用域隔离教程

    Blazor 的 CSS 隔离是编译期自动为 .razor.css 文件中选择器添加唯一属性标识并注入对应 HTML 属性,实现组件级样式作用域;需同名同目录配对文件,支持 ::deep 透传和 :global() 全局声明。 Blazor 提供了原生的 CSS 隔离(CSS Isolation)机…

    2025年12月17日
    300
  • Blazor JWT Token 登录和授权方法

    Blazor中JWT登录授权需前后端闭环协作:后端用HMAC-SHA256签发含name/role/exp的token并返回UserToken结构;前端存localStorage、HttpClient自动携Bearer头、AuthorizeView拦截路由、401时跳登录页、登出时清除token并重…

    2025年12月17日
    000
  • Blazor 怎么创建 PWA 应用

    Blazor 创建 PWA 必须使用 Blazor WebAssembly 项目,勾选“Progressive Web Application”选项自动生成 manifest.json 和 service-worker.js;需完善 manifest 字段、确保图标路径正确、HTTPS 部署,并通过…

    2025年12月17日
    100

发表回复

登录后才能评论
关注微信