响应拦截器需精准识别强制下线指令(如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)或无效路径,避免重定向漏洞


















