VueJs集成Keycloak多客户端登录陷入无限循环问题排查

核心问题分析 #

你遇到的无限循环和Cookie被删除问题，本质是并行初始化多个Keycloak实例导致的会话冲突，具体原因如下：

1. 并行实例的Cookie干扰：两个Keycloak实例同时与Keycloak服务器交互，会互相覆盖/重置会话Cookie（如KEYCLOAK_SESSION）。第二个实例的check-sso流程会触发服务器验证会话，导致第一个实例的会话状态失效，进而触发重定向登录，形成循环。
2. 错误的多客户端处理逻辑：同一Realm下的客户端共享用户会话，不需要重复初始化独立实例，重复初始化反而会破坏会话一致性。
3. 无效的初始化参数：initOptions中的resource不是keycloak-js的合法参数，属于冗余配置，会干扰初始化流程。

修复方案：令牌交换实现多客户端授权 #

同一Realm下，用户登录主客户端后，可通过令牌交换获取其他客户端的令牌，无需重复初始化实例，彻底避免会话冲突。

修改后的代码实现 #

src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import { keycloakConfigs, initKeycloak } from "./keycloak";

const app = createApp(App);

// 仅初始化主客户端（作为会话入口）
const mainKeycloak = initKeycloak("vue-client");

mainKeycloak.init({ onLoad: "login-required" })
  .then(async (authenticated) => {
    if (!authenticated) {
      console.log("用户未登录");
      return;
    }

    const authenticatedClients = [mainKeycloak];
    // 令牌交换获取第二个客户端的授权
    const secondClientConfig = keycloakConfigs.find(c => c.clientId === "vue-client2");
    if (secondClientConfig) {
      try {
        // 通过当前客户端令牌交换vue-client2的令牌
        const exchangeResult = await mainKeycloak.tokenExchange({
          client_id: secondClientConfig.clientId,
          grant_type: "urn:ietf:params:oauth:grant-type:token-exchange",
          subject_token: mainKeycloak.token,
          requested_token_type: "urn:ietf:params:oauth:token-type:access_token"
        });
        // 初始化第二个客户端实例并手动注入令牌（避免重新触发登录流程）
        const secondKeycloak = initKeycloak("vue-client2");
        secondKeycloak.token = exchangeResult.access_token;
        secondKeycloak.refreshToken = exchangeResult.refresh_token;
        secondKeycloak.idToken = mainKeycloak.idToken;
        secondKeycloak.authenticated = true;
        
        authenticatedClients.push(secondKeycloak);
      } catch (error) {
        console.error("获取第二个客户端令牌失败:", error);
      }
    }

    // 将授权客户端实例挂载到全局
    app.config.globalProperties.$authenticatedClients = authenticatedClients;
    app.mount("#app");
  })
  .catch(error => {
    console.error("Keycloak初始化失败:", error);
  });

src/plugins/keycloak.js（简化实现）

const keycloakPlugin = {
  install(app, keycloakInstance) {
    // 挂载主Keycloak实例到全局（可选）
    app.config.globalProperties.$keycloak = keycloakInstance;
  },
};

export default keycloakPlugin;

额外注意事项 #

• 确保Keycloak后台中，两个客户端都开启了允许令牌交换（在客户端设置的Advanced->Token Exchange Enabled中开启）。
• 无需重复设置redirectUri，keycloak-js会自动使用当前页面地址，除非你需要指定特定跳转地址。

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