React集成Keycloak令牌过期后无限循环刷新、登录失败问题求助

我之前帮朋友排查过几乎一模一样的问题，你的场景里出现无限401循环，大概率是token刷新机制失效加上库的自动重试逻辑导致的。结合你的代码和配置，我整理了几个关键的修复步骤：

一、先排查Keycloak后台的客户端配置 #

这是很多人容易忽略的点，先确保你的pim_test客户端配置正确：

• 进入Keycloak后台的my_pim realm → 找到pim_test客户端
  1. 确认Access Type设置为Public（和你config里的public-client: true对应）
  2. 在Web Origins字段里添加你的前端应用地址，比如开发环境填http://localhost:3000（如果你的前端跑在其他端口就填对应端口），生产环境填正式域名。这一步是为了避免跨域请求被浏览器拦截，导致token刷新失败。
  3. 确保Standard Flow Enabled是开启的（public client依赖这个流程获取和刷新token）

二、修复React应用的初始化配置 #

你的ReactKeycloakProvider缺少了public client必备的PKCE配置，加上它能提升安全性同时避免刷新失败：

<ReactKeycloakProvider 
  initOptions={{ 
    onLoad: 'login-required',
    pkceMethod: 'S256' // 新增这一行，public client必须开启PKCE
  }} 
  onTokens={tokenLogger} 
  onEvent={eventLogger} 
  authClient={keycloak}>
  {/* 你的组件内容 */}
</ReactKeycloakProvider>

三、调整Token的存储逻辑（别手动干扰库的自动管理） #

你现在的tokenLogger只存了access token，但刷新access token需要用到refresh token。而且手动删除再设置Cookie的操作可能会干扰@react-keycloak/web内部的token管理流程。

如果一定要把token存在Cookie里，记得同时存储refresh token：

const tokenLogger = (token: any) => {
  if (token.token && token.refreshToken) {
    console.log('onKeycloakTokens', token);
    // 同时保存access和refresh token
    cookies.set('user_token', token.token, { path: '/' });
    cookies.set('refresh_token', token.refreshToken, { path: '/' });
    dispatch(actions.setAuth(true));
  }
};

如果没有特殊需求，更推荐让@react-keycloak/web自己管理token（它会存在内存或localStorage里），这样能避免手动操作带来的错误。

四、检查Keycloak版本与配置的匹配度 #

如果你的Keycloak是17+版本（Quarkus版本），注意auth-server-url不需要加/auth后缀！新版本的Keycloak默认路径已经去掉了/auth，所以你的config.dev.json要改成：

{ 
  "realm": "my_pim", 
  "auth-server-url": "http://localhost:8080/", // 去掉/auth
  "ssl-required": "external", 
  "resource": "pim_test", 
  "public-client": true, 
  "confidential-port": 0 
}

如果用的是旧版本（16及以下），那原来的配置没问题，但还是要确认这个路径能正常访问Keycloak的登录页面。

五、添加错误监听，快速定位问题 #

修改你的eventLogger，专门监听token刷新失败的事件，这样能知道到底是哪里出了问题：

const eventLogger = (event: string, error: any) => {
  console.log(`Keycloak Event: ${event}`, error);
  // 当token刷新失败时，主动触发登录，避免无限循环
  if (event === 'onTokenRefreshError') {
    console.error('Token刷新失败，原因：', error);
    keycloak.login();
  }
};

比如如果打印出CORS错误，那就是Web Origins配置的问题；如果显示refresh token无效，那可能是token存储时丢失了。

最后总结一下可能的根源 #

1. Public client未启用PKCE，导致token刷新请求被Keycloak拒绝
2. 手动存储token时遗漏了refresh token，无法发起刷新请求
3. Keycloak的CORS配置不正确，浏览器拦截了跨域的刷新请求
4. Keycloak版本与auth-server-url路径不匹配，导致请求404

按照上面的步骤一步步排查，应该能解决你的无限401循环问题。

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