登录失效时保存当前页面地址的核心是拦截未授权访问、记录目标路径、登录后跳转；关键在被拒绝瞬间记录原路径，而非登录时存储，通过401响应拦截或路由守卫提前捕获并编码 fullpath 作为 redirecturl 参数，登录成功后解码校验并跳转，退出时也主动保存以提升体验。
登录失效时保存当前页面地址，核心是“拦截未授权访问 + 记录目标路径 + 登录后跳转”。关键不在登录时存，而是在登录被拒绝的那一刻就记下用户原本想去哪。
在响应拦截器中捕获 401 并记录重定向路径
当接口返回 401（未授权）或特定业务码（如 code === 1000），说明 token 失效或已过期。此时应立即保存当前路由 fullPath，并跳转到登录页：
- 使用 encodeURIComponent(route.fullPath) 对路径编码，避免特殊字符出错
- 拼接到登录 URL 的 query 参数中，例如：
/login?redirectUrl=%2Fdashboard%2Fprofile - 跳转前清除本地无效 token 和用户信息，防止残留状态干扰
路由守卫中对需登录页面做前置保护
给需要鉴权的路由统一配置 meta: { needLogin: true }，在全局前置守卫中检查登录态：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章