Blazor JWT Token 登录和授权方法_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Blazor JWT Token 登录和授权方法

2025-12-14

浏览次数：次

返回列表

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

blazor jwt token 登录和授权方法

Blazor 中实现 JWT 登录和授权，核心是前后端协同：后端签发并验证 token，前端安全存储、携带并控制访问。关键不在“能不能做”，而在于“每一步是否闭环”——登录拿 token、请求带 token、未授权时跳转、退出清 token，缺一不可。

后端生成 JWT 并返回

用户提交账号密码后，后端验证通过，立即生成标准 JWT 并返回给前端。推荐封装为独立服务（如 IJWTHelper），避免逻辑散落。

使用 SymmetricSecurityKey 和 HMAC-SHA256 签名，密钥从 appsettings.json 读取，不硬编码
payload 至少包含 name（ClaimTypes.Name），可选加 role、uid 等用于后续授权
设置合理过期时间（如 30 分钟），避免长期有效 token 带来的风险
返回结构建议统一，例如 UserToken { Token: "...", ExpireTime: ..., IsSuccess: true }

前端存储与携带 token

Blazor WebAssembly（WASM）默认用 localStorage，Blazor Server 可选 cookie 或 SignalR 上下文透传；无论哪种，都要确保每次 API 请求头自动带上 Authorization: Bearer xxx。

登录成功后调用 JS 保存：await js.InvokeVoidAsync("localStorage.setItem", "authToken", token)
封装带认证头的 HttpClient，或在发送前动态注入：client.DefaultRequestHeaders.Authorization = new("Bearer", token)
避免在组件中反复读取 localStorage，可抽成 AuthService 提供 GetTokenAsync() 方法
敏感操作（如修改密码）建议额外校验 token freshness，不单靠存在性

路由保护与未授权跳转

JWT 本身不控制页面访问，必须由前端主动拦截。Blazor 没有内置“401 自动跳转”，需手动处理。

Glarity

Glarity是一款免费开源的AI浏览器扩展，提供YouTube视频总结、网页摘要、写作工具等功能，支持免费的镜像翻译，电子邮件写作辅助，AI问答等功能。

131 查看详情 Glarity

在 App.razor 或布局组件中检查 token 是否存在且未过期（可解析 payload 中 exp 字段）
对受保护页面，用 <authorizeview></authorizeview> 包裹，配合 NotAuthorized 模板跳转到登录页
API 调用失败且状态码为 401 时，在 service 层捕获并触发全局导航：N*igationManager.N*igateTo("/login?returnUrl=" + Uri.EscapeDataString(currentUrl))
注册页跳转不是 JWT 标准行为，而是业务逻辑——比如登录接口返回 401 且后端明确提示“用户不存在”，前端才跳注册