Blazor登录页JWT Bearer Token使用及代码审核咨询

一、获取JWT Bearer Token的实现步骤 #

1. 定义和API匹配的登录请求模型
   先创建对应登录接口的实体类，保证参数和API接收格式一致：

   public class LoginRequest
   {
       public string Username { get; set; }
       public string Password { get; set; }
   }
   

2. 用HttpClient发送登录请求获取Token
   在登录组件里注入HttpClient和IJSRuntime（用于操作前端存储），调用API接口拿到Token：

   @inject HttpClient Http
   @inject IJSRuntime JSRuntime
   @inject NavigationManager NavManager
   
   private string Username { get; set; }
   private string Password { get; set; }
   private string ErrorMessage { get; set; }
   
   private async Task HandleLogin()
   {
       ErrorMessage = string.Empty;
       var loginReq = new LoginRequest { Username = Username, Password = Password };
       try
       {
           var response = await Http.PostAsJsonAsync("/api/auth/login", loginReq);
           if (response.IsSuccessStatusCode)
           {
               var tokenRes = await response.Content.ReadFromJsonAsync<TokenResponse>();
               // WebAssembly用LocalStorage存Token，Blazor Server可改用服务器Session
               await JSRuntime.InvokeVoidAsync("localStorage.setItem", "jwtToken", tokenRes.AccessToken);
               // 登录成功后跳转主页
               NavManager.NavigateTo("/");
           }
           else
           {
               ErrorMessage = await response.Content.ReadAsStringAsync();
           }
       }
       catch (Exception ex)
       {
           ErrorMessage = $"请求失败：{ex.Message}";
       }
   }
   

   对应的Token返回模型也要和API输出一致：

   public class TokenResponse
   {
       public string AccessToken { get; set; }
       public string RefreshToken { get; set; }
       public int ExpiresIn { get; set; }
   }
   

二、在其他页面/组件中使用Token #

1. 全局配置HttpClient自动携带Token #

写一个消息处理程序，让所有API请求自动带上Authorization头，不用每次手动加：

public class JwtAuthHandler : DelegatingHandler
{
    private readonly IJSRuntime _jsRuntime;

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

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

然后在Program.cs里注册这个处理程序：

builder.Services.AddHttpClient("ApiClient", client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
}).AddHttpMessageHandler<JwtAuthHandler>();

builder.Services.AddScoped<JwtAuthHandler>();

之后组件里注入命名HttpClient就能自动携带Token：

@inject IHttpClientFactory HttpClientFactory
private HttpClient _apiClient;

protected override void OnInitialized()
{
    _apiClient = HttpClientFactory.CreateClient("ApiClient");
}

2. 手动给单个请求加Token #

如果不需要全局配置，也可以在单独请求里手动添加：

var token = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "jwtToken");
var request = new HttpRequestMessage(HttpMethod.Get, "/api/user/profile");
request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token);
var response = await Http.SendAsync(request);

三、登录代码的审核要点 #

• 输入验证：必须给用户名、密码加非空校验（比如用[Required]数据注解），避免发送空请求到API。
• 错误处理：除了判断请求状态码，还要处理网络异常、API返回的业务错误（比如用户名密码不匹配），给用户明确提示。
• Token存储安全：LocalStorage是持久化存储，设备共享时风险高，短期会话可以用SessionStorage；Blazor Server优先用服务器端Session存Token，减少前端暴露风险。
• 强制HTTPS：登录请求必须走HTTPS，防止Token在传输过程中被窃取。
• 过期处理：要监听Token过期，或者在请求返回401时引导用户重新登录/刷新Token。
• 旧Token清理：登录前先清除本地存储里的旧Token，避免携带无效Token发起请求。
• 密码传输：HTTPS下密码是加密传输的，但如果API支持，也可以前端先哈希密码再发送（不过通常API会自己处理密码哈希）。

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