响应拦截器需精准识别强制下线指令（如401、code:1001或响应头x-force-logout），并同步清除凭证、中断请求、阻止错误冒泡；通过全局标记防重复跳转，且可选保留redirect路径实现登录后回退。
服务端返回强制下线指令（比如 code: 401、code: 999 或自定义状态如 { code: 1001, message: "账号已在别处登录" }），响应拦截器是统一捕获和响应这类指令的核心位置。关键不是“看到错误就跳转”，而是准确识别指令语义、清理本地状态、防止重复跳转，并保障用户体验连贯。
识别强制下线的响应特征
后端通常通过以下任一方式下发指令，需在响应拦截器中精准匹配：
-
HTTP 状态码：如
401 Unauthorized（未认证）或499（自定义下线码），可通过error.response?.status获取 -
业务状态码：如
response.data.code === 1001、response.data.code === 999，常见于统一响应结构{ code, data, message } -
响应头字段：如
response.headers['x-force-logout'] === 'true'，适合灰度或运营场景
执行安全退出动作
识别成功后，必须同步完成三项操作，缺一不可：
-
清除凭证：删除
localStorage.getItem('token')、sessionStorage中的用户信息，以及 Pinia/Vuex 中的登录态 -
中断后续请求：调用
router.replace('/login')或router.push({ path: '/login', query: { redirect: currentPath } })，避免用户停留在受保护页面 -
阻止错误冒泡：不直接
return Promise.reject(...)，而应先跳转再拒绝，否则组件可能触发冗余错误提示
防重复跳转与竞态处理
多个并发请求同时收到下线指令时，容易触发多次跳转或白屏。推荐做法：
- 用一个布尔变量（如
let isLoggingOut = false）做全局标记，首次触发时设为true，后续拦截直接忽略 - 跳转前检查当前路由是否已是登录页，避免
/login → /login循环 - 若使用 Pinia，可在 store 中维护
isForceLogoutPending状态，供 UI 层响应式展示提示（如弹出“账号异常，正在退出…”）
保留用户上下文（可选但推荐）
强制下线不等于彻底清空。可记录原始访问路径，登录成功后自动返回：
- 跳转时携带
query.redirect参数：router.replace({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } }) - 登录成功后，在 login 组件中读取该参数并执行
router.replace(redirect || '/') - 注意过滤敏感路径（如 /admin、/pay）或无效路径，避免重定向漏洞
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
