Vue导航守卫实现登录后自动跳转回访问目标页

想把登录后自动跳转这件事做好，核心通常就在三点：目标地址记录要准确，登录状态判断要明确，最后执行跳转时还要足够稳定。用户在未登录状态下访问受限页面时，需要先通过前置导航守卫进行拦截，并把当前目标路径写入 login 页的 query 参数；等用户完成登录后，再根据这个路径跳转回原先想访问的页面。另外，用户主动点击登录入口时，也应该同步携带 redirect 参数；而在退出登录时，则要及时把 redirect 一起清理掉，避免后续出现错误跳转或回跳异常。

这套逻辑的核心非常明确：当用户尝试进入受保护页面时，先准确保存当前访问目标；待登录成功后，再读取这个目标路径并完成页面跳转。归根结底，重点还是三件事——访问路径要记录准确、不同场景要区分清楚、登录后跳转要执行稳定。对于 Vue 项目来说，这也是实现登录后返回原页面、优化用户体验的常见做法。

在全局前置守卫中拦截未登录请求

当用户访问需要登录权限的路由（例如 /dashboard）但当前尚未登录时，不应直接进入目标页，而是先保存目标地址，并强制跳转到登录页面：

• 先判断目标路由是否配置了 meta.requiresAuth: true
• 再确认当前是否缺少有效 token 或登录状态无效（例如 store.state.token 为空）
• 随后调用 next({ name: 'Login', query: { redirect: to.fullPath } })，将目标页面路径通过 query 参数传递给登录页

登录组件接收并保存 redirect 参数

登录页对应的路由配置需要支持接收 redirect 参数，常见写法如下：

• 在路由定义中添加 props: route => ({ redirect: route.query.redirect })
• 在组件内部通过 props: ['redirect'] 显式声明接收该参数
• 登录成功后，使用 this.$router.push(this.redirect || { name: 'Home' })，优先返回用户原本要访问的页面，否则跳转到首页

从链接入口主动携带 redirect

如果用户是在任意页面点击“登录”按钮或登录链接进入登录页，也建议主动带上当前路径，这样登录完成后同样可以返回之前所在页面：

• 可以使用
• 也可以在方法中调用 this.$router.push({ name: 'Login', query: { redirect: this.$route.fullPath } })

退出登录时清理 redirect 避免误跳

用户退出登录后，如果 redirect 参数或记录仍然保留，下次登录时就可能跳转到失效页面、历史页面或与当前操作无关的页面，因此清理动作不能忽略：

• 登出成功后，手动清除 sessionStorage / localStorage 中保存的 redirect 记录
• 或者重置 Vuex 中维护的 redirect 状态（如果项目通过 store 统一管理）
• 尽量避免因浏览器缓存或未清理的 query 参数残留，导致登录后跳转异常或页面回跳错误