Keycloak 10配合React应用登录成功后无限重定向问题咨询

问题根因 #

• 没有等待Keycloak异步初始化完成就渲染受保护路由：keycloak.init()是异步返回Promise的操作，你当前代码直接调用init后没有等待状态落地，路由层判断用户仍未登录，会重复触发登录跳转逻辑
• 地址栏授权参数未被消费：登录跳转回来携带的state、code等hash参数没有被及时清理，每次页面重渲染都会被Keycloak重新读取，重复触发校验流程
• 冗余配置冲突：配置中同时声明了clientId和resource两个作用一致的参数，旧版本keycloak-js可能出现读取优先级异常

修复步骤 #

1. 调整初始化逻辑，交由@react-keycloak/web统一管理init流程 #

不要单独调用keycloak.init()，将初始化配置传入ReactKeycloakProvider，由组件控制初始化时序，等待登录状态确认后再渲染业务组件：

// App.jsx 代码
import { ReactKeycloakProvider } from '@react-keycloak/web'
import keycloak from './keycloak'
import Dashboard from './Dashboard'

const initOptions = {
  checkLoginIframe: false,
  pkceMethod: 'S256',
  silentCheckSsoFallback: false,
  onLoad: 'login-required' // 明确指定未登录时自动跳转登录页
}

// 处理Keycloak事件回调
const handleKeycloakEvent = (event, error) => {
  if (event === 'onAuthSuccess') {
    // 登录成功后清理地址栏授权参数，避免重复校验
    if (window.location.hash.includes('state=') && window.location.hash.includes('code=')) {
      window.history.replaceState({}, document.title, window.location.pathname)
    }
  }
}

function App() {
  return (
    <ReactKeycloakProvider
      authClient={keycloak}
      initOptions={initOptions}
      onEvent={handleKeycloakEvent}
      LoadingComponent={<div>认证中...</div>}
    >
      <Dashboard />
    </ReactKeycloakProvider>
  )
}

2. 清理Keycloak配置冗余字段 #

修改keycloak实例初始化代码，删除重复的resource参数：

import Keycloak, { KeycloakConfig } from 'keycloak-js';

const keycloak = Keycloak({
  url: the_authentication_server,
  clientId: the_client_id,
  'confidential-port': 0,
  'public-client': true,
  realm: the_realm,
  'ssl-required': 'external',
} as KeycloakConfig);

export default keycloak;

3. 校验服务端配置 #

登录Keycloak管理后台，检查对应客户端的配置：

• 有效重定向URI 配置包含http://localhost:3000/*
• Web Origins 配置包含http://localhost:3000，避免跨域导致token校验失败

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