使用HttpOnly Cookie时，SignalR的JWT刷新标准推荐方案（无需重写连接逻辑）

在React前端使用SignalR时，通过HttpOnly Cookie传递JWT令牌做身份验证，JavaScript无法访问该令牌。当服务器长时间离线后JWT过期需要刷新，已有可用的refresh-token端点（同样使用HttpOnly Cookie）。

当前SignalR配置如下：

this.connection = new signalR.HubConnectionBuilder()
    .withUrl(serverUrl)
    .withAutomaticReconnect()
    .build();

await this.connection.start();

this.connection.onclose(() => {
    console.warn("SignalR Disconnected");
});

this.connection.onreconnecting((error) => {
    console.warn("SignalR Reconnecting...", error);
});

this.connection.onreconnected((connectionId) => {
    console.info(`SignalR Reconnected. Connection ID: ${connectionId}`);
});

上下文说明 #

• JWT仅通过HttpOnly Cookie传递，无法使用微软文档中的accessTokenFactory方案；
• 此前相关讨论均聚焦于accessTokenFactory，不适用于HttpOnly Cookie场景，现有旧解决方案，想了解3年后是否有新的标准/推荐方案；
• 注意：避免任何“检查消息是否包含401或未授权”的方案。

核心问题：在使用HttpOnly Cookie的情况下，是否存在标准或推荐的方法来处理SignalR的JWT刷新，且无需完全重写SignalR连接管理逻辑？

目前针对HttpOnly Cookie场景下的SignalR JWT刷新，有两种主流的推荐方案，无需重写SignalR核心连接逻辑：

1. 利用withUrl配置自定义请求前置逻辑 #

在初始化SignalR连接时，通过withUrl的第二个参数自定义请求逻辑，让每次连接（包括重连）前先调用refresh-token端点刷新令牌：

this.connection = new signalR.HubConnectionBuilder()
    .withUrl(serverUrl, {
        async fetch(url, options) {
            // 先调用refresh-token端点，触发服务器更新HttpOnly Cookie中的JWT
            await fetch('/api/refresh-token', {
                method: 'POST',
                credentials: 'include' // 确保携带HttpOnly Cookie
            });
            // 执行SignalR原本的连接请求
            return fetch(url, { ...options, credentials: 'include' });
        }
    })
    .withAutomaticReconnect()
    .build();

该方案借助withUrl的请求钩子，将令牌刷新嵌入SignalR的连接流程中，前端无需处理令牌内容，仅需确保请求携带凭证即可。

2. 基于自动重连事件的前置令牌刷新 #

利用SignalR的onreconnecting事件，在重连启动前主动调用refresh-token端点：

this.connection = new signalR.HubConnectionBuilder()
    .withUrl(serverUrl, { credentials: 'include' })
    .withAutomaticReconnect()
    .build();

// 重连触发时先刷新令牌
this.connection.onreconnecting(async (error) => {
    console.warn("SignalR Reconnecting...", error);
    await fetch('/api/refresh-token', {
        method: 'POST',
        credentials: 'include'
    });
});

await this.connection.start();

this.connection.onclose(() => {
    console.warn("SignalR Disconnected");
});

this.connection.onreconnected((connectionId) => {
    console.info(`SignalR Reconnected. Connection ID: ${connectionId}`);
});

这种方案贴合SignalR的自动重连生命周期，仅在重连时触发令牌刷新，避免了初始连接的冗余操作。

关键注意事项 #

• 所有请求必须携带credentials: 'include'，否则浏览器不会发送HttpOnly Cookie；
• 服务器端需配置CORS允许凭证传递（Access-Control-Allow-Credentials: true）；
• refresh-token端点需支持在JWT过期前后正常返回新JWT并更新HttpOnly Cookie，无需前端介入令牌存储。

这两种方案都是当前HttpOnly Cookie场景下的标准处理方式，也是近3年社区实践验证有效的方案，无需重写SignalR连接管理逻辑。

内容的提问来源于stack exchange，提问作者pierre.b