使用@react-keycloak/web传入token初始化Keycloak JS适配器失效问题咨询

常见原因及修复方案 #

• 版本不匹配
  你需要保证@react-keycloak/web和依赖的keycloak-js包大版本完全一致，版本差异会导致initOptions参数不被识别、直接被忽略。比如使用keycloak-js 20.x版本时，必须安装对应适配20.x的@react-keycloak/web版本。
• 初始化时token未赋值
  确认你代码中token、refreshToken、idToken三个变量在ReactKeycloakProvider渲染时已经完成赋值，如果你是异步从本地存储/后端接口获取这三个值，需要等待值返回后再渲染Provider，否则初始化时传入的就是undefined，自然不会生效。
• onLoad配置冲突
  当前你使用的onLoad: 'check-sso'配置会触发适配器优先向Keycloak服务端校验当前会话状态，会覆盖你主动传入的token值，可直接删除该配置项，传入已有token时不需要触发自动sso校验逻辑。

兜底可行方案 #

如果上述调整后仍不生效，可以放弃使用Provider的自动初始化逻辑，手动初始化keycloak实例后再传入Provider，示例代码如下：

import keycloakClient from './keycloak';
import { ReactKeycloakProvider } from '@react-keycloak/web';
import AuthenticatedApp from './AuthenticatedApp';

// 初始化配置
const keycloakInitOptions = {
  token: token,
  refreshToken: refreshToken,
  idToken: idToken,
  checkLoginIframe: false
};

// 手动初始化完成后再渲染应用
keycloakClient.init(keycloakInitOptions).then(() => {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <ReactKeycloakProvider authClient={keycloakClient}>
      <AuthenticatedApp />
    </ReactKeycloakProvider>
  )
})

如果需要更直接的处理，也可以在初始化完成后手动给keycloak实例赋值token字段，再触发有效性校验：

// 初始化完成后手动赋值
keycloakClient.token = token;
keycloakClient.refreshToken = refreshToken;
keycloakClient.idToken = idToken;
// 校验token有效性，过期会自动触发刷新
keycloakClient.updateToken(0).then(() => {
  // 后续业务逻辑
})

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