登录失效时保存当前页面地址的核心是拦截未授权访问、记录目标路径、登录后跳转；关键在被拒绝瞬间记录原路径，而非登录时存储，通过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 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 若未登录（如 localStorage 中无 token），直接跳转到
/login?redirect=xxx - 注意：这里不是等 401 才跳，而是主动拦截，提前把用户想去的页面记下来
- 避免用户点进某个页面后才触发请求、再等响应失败——体验更顺滑
登录成功后解析并跳转回原页面
登录接口成功后，从路由 query 中读取 redirectUrl，解码后导航：
立即学习“前端免费学习笔记（深入）”；
- 用 decodeURIComponent(route.query.redirectUrl) 还原原始路径
- 校验该路径是否合法（如是否为白名单路由、是否存在对应路由记录）
- 跳转后建议清除 query 参数，避免刷新时重复跳转或参数污染
退出登录时也同步记录当前页（增强体验）
用户主动退出时，同样可主动保存当前路径，方便下次登录快速回到操作现场：
- 调用
router.push(`/login?redirectUrl=${encodeURIComponent(route.fullPath)}`) - 比等待 401 更可控，且覆盖了“token 未过期但用户手动登出”的场景
