React Query窗口聚焦重发请求为何返回401？Keycloak JWT问题

核心原因 #

1. Keycloak token刷新触发时机限制
   多数Keycloak客户端（如keycloak-js）默认仅在**用户主动交互（点击、输入等）**时才会检查access token的有效期，自动刷新过期token。而React Query的refetchOnWindowFocus是浏览器自动触发的无用户交互操作，此时Keycloak并未执行token刷新，导致请求使用了内存中已过期的旧token，返回401。

2. 浏览器后台/静默操作限制
   现代浏览器对后台标签页或无用户交互的静默请求有严格限制，Keycloak的自动静默刷新请求可能被浏览器拦截，无法成功获取新token，进一步导致聚焦时的请求用旧token失败。

可行解决方案 #

• 强制Keycloak主动刷新token
  配置Keycloak启用静默刷新机制，初始化时设置checkLoginIframe: true，让客户端定期检查token状态，在过期前自动刷新，无需等待用户交互：

  const keycloak = new Keycloak({
    url: 'your-keycloak-url',
    realm: 'your-realm',
    clientId: 'your-client-id',
    checkLoginIframe: true,
    checkLoginIframeInterval: 60 // 每60秒检查一次
  });
  

• 给React Query添加401错误处理逻辑
  在React Query的查询配置中加入onError钩子，当收到401响应时，主动触发Keycloak的token刷新，然后重试请求：

  useQuery({
    queryKey: ['data'],
    queryFn: fetchData,
    refetchOnWindowFocus: true,
    onError: async (error) => {
      if (error.response?.status === 401) {
        // 触发Keycloak刷新token
        await keycloak.updateToken(5); // 提前5秒刷新
        // 重试当前查询
        queryClient.invalidateQueries(['data']);
      }
    }
  });
  

• 确保token读取的实时性
  不要将token缓存到内存变量中，每次发起请求时直接从keycloak.token或localStorage中读取最新值，避免使用过期的缓存token。

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