如何在Vue应用中检测Keycloak服务端发起的会话终止？

核心思路 #

Keycloak前端适配器自带会话状态检测能力，要么通过正确配置事件监听捕获服务端会话变更，要么主动定时校验会话有效性，就能解决服务端注销时前端无提示的问题。

方法一：正确绑定Keycloak事件监听 #

之前事件未触发大概率是绑定时机或配置缺失导致，按以下步骤调整：

1. 初始化前绑定事件
   确保在keycloak.init()完成前绑定事件，同时开启iframe会话检查（Keycloak检测服务端会话变化的核心机制）。示例代码（main.js）：

   import Keycloak from 'keycloak-js'
   
   const keycloak = new Keycloak({
     url: '你的Keycloak地址',
     realm: '你的Realm',
     clientId: '你的客户端ID'
   })
   
   // 捕获服务端主动注销的场景
   keycloak.onAuthLogout = () => {
     alert('你的会话已被管理员终止或登录设备过多，请重新登录')
     window.location.href = keycloak.loginUrl
   }
   
   // 处理token刷新失败（会话失效的典型表现）
   keycloak.onAuthRefreshError = () => {
     if (!keycloak.authenticated) {
       alert('会话已失效，请重新登录')
       window.location.href = keycloak.loginUrl
     }
   }
   
   // 初始化时必须开启iframe检查
   keycloak.init({
     onLoad: 'login-required',
     checkLoginIframe: true, // 关键配置，默认开启但需确保未手动关闭
     checkLoginIframeInterval: 5 // 会话检查间隔，单位秒
   }).then(authenticated => {
     if (authenticated) {
       new Vue({
         render: h => h(App)
       }).$mount('#app')
     }
   })
   

方法二：手动定时校验会话状态 #

如果事件监听仍不稳定，可主动定时调用API校验会话有效性：

// 登录成功后启动定时检查，每10秒执行一次
setInterval(() => {
  if (keycloak.authenticated) {
    // 强制立即检查token状态，0表示不等待过期
    keycloak.updateToken(0).catch(() => {
      if (!keycloak.authenticated) {
        alert('会话已被终止，请重新登录')
        keycloak.logout()
      }
    })
  }
}, 10000)

这种方式交互次数略多，但胜在稳定性强，适合对提示及时性要求高的场景。

之前方法失败的原因 #

1. updateToken的catch误触发：该catch会捕获所有token刷新失败场景（比如网络波动、token正常过期但会话仍有效），不止服务端注销，所以会出现误提示。
2. 事件监听未生效：大概率是checkLoginIframe被设为false，导致Keycloak无法感知服务端会话变化；或是事件绑定在init()之后，错过初始化阶段的事件注册时机。

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