Vue 3中需服务端推送或轮询检测会话状态，前端通过Pinia监听并清除token、重置请求头、跳转登录页，配合axios拦截器与路由守卫双重防护，辅以提示和redirect参数提升体验。
Vue 3 中处理“账号在别处登录，当前设备被强行下线”需要服务端配合 + 前端主动监听 + 状态清理闭环。核心不是拦截跳转，而是感知会话失效并优雅退出。
服务端需提供会话冲突通知机制
这是前提。常见实现方式有两种：
- 长连接推送：WebSocket 或 SSE 实时下发 “token 已失效” 或 “用户已在其他设备登录” 消息
-
轮询检测：前端定时（如每 5 分钟）调用
/api/auth/session/status接口，返回当前 token 是否仍有效、是否被踢出
推荐优先使用 WebSocket 方式，实时性高、资源消耗低；若技术受限，轮询需搭配防抖和失败重试逻辑。
前端监听并触发强制登出流程
以 Pinia 为例，在用户 Store 中统一处理：
立即学习“前端免费学习笔记（深入）”；
- 监听到服务端通知后，立即调用
useUserStore().clearAuth() - 清除本地持久化数据：
localStorage.removeItem('token')、localStorage.removeItem('userInfo') - 清空 axios 请求拦截器中的 Authorization 头，避免后续请求携带已失效 token
- 跳转至登录页，并可附带提示：「您的账号已在其他设备登录，当前会话已结束」
路由守卫与接口拦截器协同防御
仅靠主动通知还不够，要防止用户在通知延迟期间继续操作：
-
axios 响应拦截器：对所有 401（Unauthorized）或自定义错误码（如
ERR_TOKEN_KICKED）统一捕获，自动触发登出 -
全局路由守卫：每次跳转前检查
userStore.token是否存在且未被标记为“已踢出”，若已踢出则直接中断导航 - 两者结合，确保无论用户点击菜单、刷新页面、还是发起请求，都能及时响应会话终止
增强体验的细节处理
避免突兀退出，提升用户感知：
- 登出前弹出确认框或 Toast 提示，说明原因（非强制，但建议）
- 保留原页面 URL，登出后跳转登录页时带上
redirect参数，登录成功后可选择性返回（注意：被踢出场景通常不建议自动返回） - 登出后清空除用户凭证外的敏感缓存（如购物车草稿、未提交表单），防止信息残留
