Angular集成Keycloak多窗口登出自定义页面实现方案

以下两种方案可按需任选其一实现，不需要额外引入第三方依赖，基于浏览器原生API+Keycloak原生能力即可完成。

方案1：仅主窗口展示登录页，副窗口展示操作提示 #

• 改造Keycloak全局初始化拦截逻辑：所有窗口检测到未登录状态（含主动登出、Token过期被静默SSO校验踢下线场景）时，不要直接触发默认登录跳转，先走自定义的跨窗口状态判断逻辑。
• 副窗口分支：识别到自身为副窗口身份时，直接渲染固定提示页，展示文案请先在主窗口完成登录，登录成功后当前页面将自动恢复访问，不加载Keycloak登录跳转逻辑，同时持续监听跨窗口登录状态广播。
• 主窗口分支：识别到自身为主窗口身份时，正常触发Keycloak登录流程，完成登录拿到有效Token后，第一时间通过跨窗口通道广播LOGIN_SUCCESS事件，同时将有效Token、登录态标识写入localStorage做持久化。
• 副窗口收到LOGIN_SUCCESS事件后，自动读取本地存储的有效Token完成Keycloak实例初始化，直接恢复登出前停留的页面，无需用户手动刷新。
• 容错补充：如果副窗口检测到主窗口已被关闭，直接在提示页展示「将当前窗口设为主窗口登录」的操作按钮，避免流程卡死。

方案2：任意窗口完成登录，全窗口自动同步状态并回跳原页面 #

该方案无需强依赖主副窗口身份识别，适配性更强：

• 前置状态存储：每个窗口独立维护自身路由状态，每次路由跳转完成后，把当前路由地址、查询参数写入当前窗口的sessionStorage（该存储为窗口级隔离，不会出现多窗口数据串扰），存储key固定为LAST_ROUTE_BEFORE_LOGOUT，保证记录的始终是登出前停留的最新页面。
• 加登录锁避免重复跳转：任意窗口检测到未登录状态时，先检查localStorage中是否存在LOGIN_IN_PROGRESS标识：如果不存在，就写入该标识，值为当前窗口启动时生成的唯一ID（存在自身sessionStorage即可），由当前窗口触发Keycloak登录流程；如果标识已存在且对应ID不是当前窗口，就不触发登录跳转，仅展示轻量等待提示，监听跨窗口登录状态变化即可，避免多窗口同时跳转Keycloak造成回调混乱。
• 登录成功同步逻辑：拿到登录锁的窗口完成Keycloak授权、拿到有效Token后，先把Token、用户基本信息写入localStorage，删除LOGIN_IN_PROGRESS标识，通过BroadcastChannel广播LOGIN_COMPLETED事件，再读取自身sessionStorage存储的上次路由地址，跳转到对应页面。
• 其余窗口响应逻辑：所有等待中的窗口收到LOGIN_COMPLETED事件，或监听到localStorage中Token更新时，直接用新Token重新初始化Keycloak实例，校验Token有效性通过后，读取自身sessionStorage中存储的LAST_ROUTE_BEFORE_LOGOUT值，直接跳转到登出前的页面，全程无需用户手动操作。

实现注意：需要给Keycloak的静默SSO校验（silentCheckSsoRedirectUri）配置自定义回调，不要使用默认的“检测到未登录直接跳登录页”逻辑，把未登录状态抛给上述自定义拦截逻辑处理即可，避免默认逻辑覆盖自定义跳转规则。跨窗口通信优先使用BroadcastChannel实现，低版本浏览器兜底用localStorage的storage事件即可，兼容所有主流现代浏览器。

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