Vue 3 中处理401自动跳转需结合axios响应拦截器与Vue Router 4路由守卫：仅当error.response?.status===401时清除token、用router.replace跳转并携带redirect参数；登录页请求需跳过token注入，路由不设requireAuth，配合sessionStorage标记防循环；同时用router.beforeEach前置校验+meta.requireAuth实现双重保障。

Vue 3 中处理 401 自动跳转登录页，核心是结合 axios 响应拦截器 和 路由实例，在收到 401 状态时清除凭证、跳转登录页。但光做这一步容易出问题——比如跳转后又触发新请求导致循环，或未适配 Vue Router v4 的 API 变化。

响应拦截器中正确判断并跳转

必须检查 error.response 是否存在，再取 status，避免网络异常时误判：

• 只对 error.response?.status === 401 做跳转动作
• 清除本地 token（如 localStorage.removeItem('token')）
• 使用 router.replace() 而非 router.push()，防止用户点返回又回到报错页
• 推荐带上 redirect 参数，如 { path: '/login', query: { redirect: location.pathname + location.search } }，便于登录后回跳

避免跳转循环的关键细节

401 跳转后，若登录页本身也发请求（比如校验 token），而该请求又被拦截器捕获并再次 401 → 再跳转，就会死循环。解决方法：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 登录页的请求（如 /login、/captcha）应在请求拦截器中跳过 token 注入：检查 config.url 或 config.baseURL，匹配登录相关接口就直接放行
• 确保登录页路由不带 meta: { requireAuth: true }，否则路由守卫会和拦截器互相干扰
• 跳转前加一个简单标记，比如设置 sessionStorage.setItem('skipAuthCheck', 'true')，请求拦截器读到就跳过 token 添加

配合路由守卫做双重保障

拦截器负责“已发请求的兜底”，路由守卫负责“未发请求的前置拦截”。两者互补：

• 给需要登录的路由添加 meta: { requireAuth: true }
• 在 router.beforeEach 中检查是否有有效 token，没有则跳转登录页（同样带 redirect）
• 这样即使拦截器失效或漏掉某个请求，用户也不会意外进入受保护页面

Vue 3 + Router 4 的写法注意点

Vue Router v4 不再有 router.currentRoute 这样的属性，获取当前路径要用：

• router.currentRoute.value.fullPath（响应式写法）
• 或者用 useRoute() 组合式 API 在 setup 中获取
• 跳转必须确保 router 实例已正确引入（通常从 @/router 导入，不能用 createRouter 临时创建）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！