Keycloak初始化后then回调首次点击不触发 二次点击生效如何修复

问题根本原因 #

• 当init方法配置onLoad: "login-required"时，首次触发如果用户没有登录态，Keycloak会直接跳转到统一登录页，当前页面的JS执行会直接中断，then回调自然不会执行
• 用户完成登录后，Keycloak会重定向回原页面，此时页面是完全重新加载的，第一次点击触发的执行上下文已经销毁
• 第二次点击时用户已经有有效登录态，init不会触发跳转，就会正常执行then内的逻辑

修复方案 #

核心优化原则 #

不要在点击事件中重复创建Keycloak实例和执行初始化逻辑，Keycloak实例全局仅需初始化一次，建议放在页面加载阶段执行。

修复后代码示例 #

1. 页面加载阶段完成Keycloak初始化，检查登录态

// 全局保存Keycloak实例
let globalKeycloak = null;

window.onload = async () => {
  globalKeycloak = Keycloak({
    realm: "***",
    url: "https://*****/auth/",
    clientId: "****",
  });
  // 仅检查登录态，不强制跳转
  await globalKeycloak.init({ 
    onLoad: "check-sso",
    // 可选配置：避免跨域或跳转路径异常
    redirectUri: window.location.origin
  });

  // 可选：如果是从Keycloak登录页跳转回来，自动执行后续逻辑
  const searchParams = new URLSearchParams(window.location.search);
  if (searchParams.get('fromKeycloakLogin') && globalKeycloak.authenticated) {
    // 执行登录后需要跑的逻辑
    showUserInfo();
  }
}

// 公共的拉取用户信息逻辑
const showUserInfo = async () => {
  alert("Authenticated");
  alert(JSON.stringify(globalKeycloak));
  const userInfo = await globalKeycloak.loadUserInfo();
  alert(JSON.stringify(userInfo));
}

2. 点击事件逻辑调整

onClick={async () => {
  alert("User trying to log in");
  if (globalKeycloak.authenticated) {
    // 已经登录直接走逻辑
    showUserInfo();
  } else {
    // 未登录触发登录跳转，显式指定跳转回带标记的地址
    globalKeycloak.login({
      redirectUri: `${window.location.origin}?fromKeycloakLogin=1`
    });
  }
}}

其他注意事项 #

• 不要每次点击都创建新的Keycloak实例，重复初始化会导致状态异常
• 如果必须在点击时才初始化，需要额外监听Keycloak的onAuthSuccess事件处理登录成功后的回调逻辑，不要完全依赖init的then回调

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