Razor组件中@attribute [Authorize]与Bearer Token认证失效排查

Razor组件的认证逻辑和API控制器存在差异：API是每次请求携带Token做服务端验证，而Blazor组件依赖客户端维护的认证状态，以下是具体排查和解决方向：

1. 确保Blazor认证状态正确初始化 #

Blazor不会自动从请求头读取Bearer Token生成认证状态，需要手动实现状态加载逻辑：

• 如果是Blazor WebAssembly：在Program.cs中注册授权服务和自定义认证状态提供者，从本地存储（如localStorage）读取Token并生成ClaimsPrincipal。示例代码：

  // 注册核心授权服务与自定义认证状态提供者
  builder.Services.AddAuthorizationCore();
  builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();
  
  // 自定义认证状态提供者示例
  public class CustomAuthStateProvider : AuthenticationStateProvider
  {
      private readonly ILocalStorageService _localStorage;
  
      public CustomAuthStateProvider(ILocalStorageService localStorage)
      {
          _localStorage = localStorage;
      }
  
      public override async Task<AuthenticationState> GetAuthenticationStateAsync()
      {
          var token = await _localStorage.GetItemAsync<string>("authToken");
          var identity = string.IsNullOrEmpty(token) 
              ? new ClaimsIdentity() 
              : new ClaimsIdentity(ParseJwtClaims(token), "Bearer");
          return new AuthenticationState(new ClaimsPrincipal(identity));
      }
  
      // 自行实现JWT解析方法，提取claims
      private IEnumerable<Claim> ParseJwtClaims(string token)
      {
          // 示例解析逻辑，可使用JwtSecurityTokenHandler实现
          var handler = new JwtSecurityTokenHandler();
          var jwtToken = handler.ReadJwtToken(token);
          return jwtToken.Claims;
      }
  }
  

2. 核对认证方案名称是否匹配 #

你指定的多认证方案列表可能与实际服务端配置不匹配：

• 若使用AddJwtBearer配置认证，默认方案名称为JwtBearerDefaults.AuthenticationScheme（字符串值为"Bearer"），而非Identity.Bearer这类名称。检查Program.cs中的认证配置：

  builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
      .AddJwtBearer(options =>
      {
          options.TokenValidationParameters = new TokenValidationParameters
          {
              ValidateIssuer = true,
              ValidateAudience = true,
              IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("your-secret-key")),
              // 其他验证参数
          };
      });
  

  此时Razor组件中应使用对应方案名：@attribute [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]

3. Blazor Server需处理SignalR连接认证 #

如果是Blazor Server，SignalR连接建立时必须携带Token：

• 在_Host.cshtml中配置SignalR连接时添加Token：

  <script>
      const token = localStorage.getItem('authToken');
      const connection = new signalR.HubConnectionBuilder()
          .withUrl('/_blazor', {
              accessTokenFactory: () => token
          })
          .build();
  </script>
  

  同时服务端需配置JWT认证支持SignalR的Token读取：

  services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
      .AddJwtBearer(options =>
      {
          options.Events = new JwtBearerEvents
          {
              OnMessageReceived = context =>
              {
                  var accessToken = context.Request.Query["access_token"];
                  var path = context.HttpContext.Request.Path;
                  if (!string.IsNullOrEmpty(accessToken) && path.StartsWithSegments("/_blazor"))
                  {
                      context.Token = accessToken;
                  }
                  return Task.CompletedTask;
              }
          };
      });
  

4. 验证Token本身的有效性 #

• 使用jwt.io等工具解析Token，检查是否过期、签名是否正确，以及[Authorize]要求的角色/权限Claims是否存在。若Token本身无效，任何配置都会返回401。

5. 区分服务端与客户端认证逻辑 #

你尝试的多认证方案列表是服务端中间件的配置，而Blazor组件的[Authorize]是基于客户端AuthenticationState生效的。只有当客户端认证状态正确初始化（即CustomAuthStateProvider返回合法的ClaimsPrincipal），[Authorize]才会起作用，单纯指定服务端认证方案列表无法解决问题。

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