vue中axios响应拦截器处理401的核心逻辑是：捕获401响应，清除token及用户状态，调用统一logout函数跳转登录页，并通过标记、路由守卫配合和防重机制避免循环跳转。
Vue 中 Axios 响应拦截器处理 401 的核心逻辑是：捕获状态码为 401 的响应，清除本地凭证（如 token、refreshToken），并跳转至登录页——但必须避免重复跳转或无限循环，尤其在刷新 token 失败或路由守卫未配合时容易出错。
响应拦截器中判断并清理凭证
在 axios.interceptors.response.use 的错误回调里，先确认 error.response 存在且 status === 401，再执行清理动作：
- 移除 localStorage 或 sessionStorage 中的 token、refreshToken
- 清空 Vuex/Pinia 中的用户状态（如
store.dispatch('user/logout')） - 重置请求头缓存（如有自定义 header 管理逻辑）
跳转登录页要避开路由守卫冲突
直接用 router.replace('/login') 是安全做法，但需确保路由守卫（router.beforeEach）不与之互斥：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 登录页路由（如
/login）不能设置meta: { requireAuth: true } - 跳转时带上
query.redirect，方便登录成功后回跳原页面 - 拦截器内跳转前加防重判断，例如：
if (router.currentRoute.value.path !== '/login')
避免刷新 token 导致的循环调用
若支持 refreshToken 自动续期，必须严格限制重试次数，防止失败后反复触发 401 拦截：
- 给原始请求添加标记，如
config.__retry = true，重试过的请求不再进入刷新流程 - refresh 请求本身不走 401 拦截（可单独创建无拦截的 axios 实例）
- 刷新失败时，明确清空所有凭证并强制跳转，不尝试二次重试
统一登出逻辑建议封装成函数
把登出动作抽离为可复用方法，便于拦截器、菜单登出按钮、token 过期监听等多处调用：
- 函数内完成：清除存储、重置 store、跳转登录页、重置 loading 状态
- 对外暴露
logout()，拦截器中直接调用，逻辑集中、易于测试和维护 - 可选增加提示，如
Message.warning('登录已过期，请重新登录')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
