SignalR JS客户端传递access-token失败引发401错误求助

JS客户端401错误排查与修复 #

1. 验证Token有效性
   用JWT解码工具检查token的exp（过期时间）、iss（签发者）、aud（受众）是否与后端配置一致，确保token未过期且未被篡改。
2. 修复Token获取逻辑
   避免null.toString()报错，先判断token是否存在：

   let userAuthToken = localStorage.getItem("authToken");
   if (!userAuthToken) {
     // 处理Token不存在情况，比如跳转登录页
     throw new Error("未获取到认证Token");
   }
   hubConnection = new signalR.HubConnectionBuilder()
     .withUrl("/chathub", { accessTokenFactory: () => userAuthToken })
     .withAutomaticReconnect()
     .build();
   

3. 后端JWT认证配置检查
   确保Program.cs/Startup.cs中正确配置JWT认证，且添加SignalR的Token提取逻辑（支持查询字符串和请求头传递Token）：

   builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
     .AddJwtBearer(options =>
     {
       options.TokenValidationParameters = new TokenValidationParameters
       {
         ValidateIssuer = true,
         ValidateAudience = true,
         ValidateLifetime = true,
         ValidateIssuerSigningKey = true,
         ValidIssuer = builder.Configuration["Jwt:Issuer"],
         ValidAudience = builder.Configuration["Jwt:Audience"],
         IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
       };
       // 处理SignalR连接的Token提取
       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("/chathub"))
           {
             context.Token = accessToken;
           }
           return Task.CompletedTask;
         }
       };
     });
   

   同时保证中间件顺序正确：

   app.UseCors("CorsPolicy"); // 先配置CORS
   app.UseAuthentication();   // 再认证
   app.UseAuthorization();    // 再授权
   app.MapHub<ChatHub>("/chathub"); // 最后映射Hub
   

4. CORS配置检查
   确保CORS策略允许携带Authorization头及凭证：

   builder.Services.AddCors(options =>
   {
     options.AddPolicy("CorsPolicy", policy =>
     {
       policy.WithOrigins("http://your-frontend-domain")
             .AllowAnyHeader()
             .AllowAnyMethod()
             .AllowCredentials();
     });
   });
   

Postman连接ChatHub方法 #

1. 先发起协商请求
   发送GET请求到http://your-domain/chathub/negotiate，在请求头添加Authorization: Bearer <your-jwt-token>，获取返回的connectionId。
2. 建立WebSocket连接
   在Postman的WebSocket模块，输入地址：ws://your-domain/chathub?id=<connectionId>，或者直接在查询参数携带Token：ws://your-domain/chathub?access_token=<your-jwt-token>，发起连接即可。

移动端Socket客户端认证方案 #

C#客户端（如Xamarin/.NET MAUI） #

使用SignalR官方客户端SDK，配置AccessTokenProvider：

var connection = new HubConnectionBuilder()
  .WithUrl("https://your-domain/chathub", options =>
  {
    options.AccessTokenProvider = () => Task.FromResult("your-jwt-token");
  })
  .Build();

Android/Kotlin客户端 #

val connection = HubConnectionBuilder.create("https://your-domain/chathub")
  .withAccessTokenProvider(Single.defer {
    Single.just("your-jwt-token")
  })
  .build();

iOS Swift客户端 #

let connection = HubConnectionBuilder(url: URL(string: "https://your-domain/chathub")!)
  .withAccessTokenProvider { () -> String? in
    return "your-jwt-token"
  }
  .build()

如果直接使用原生WebSocket，可在连接地址后拼接?access_token=<your-jwt-token>，后端会通过之前配置的OnMessageReceived事件提取Token完成认证。

额外排查点 #

• 确保ChatHub的[Authorize]特性指定的认证Scheme与后端配置一致（JwtBearerDefaults.AuthenticationScheme）。
• 检查Token是否包含sub（用户ID）等必要Claim，部分场景下SignalR需要识别用户身份。
• 若使用HTTPS，确保证书配置正确，避免因SSL问题导致请求失败。

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