路由权限设计的深度：如何拦截 Token 过期后的跳转请求

Token过期需在请求前、响应后、页面加载时三节点主动拦截：响应拦截器捕获401/10001并清token跳登录页；路由守卫校验本地token时效性；登录成功后解析from_url精准还原页面，辅以时间毫秒比对、localStorage异常处理、Refresh Token隔离及并发锁机制。

Token 过期后的跳转请求不能靠“猜”或“等用户点进来才处理”，必须在请求发起前、响应返回后、页面加载时三个关键节点主动拦截，形成闭环防御。

响应拦截器：第一道防线，捕获 401/10001 失效信号

这是最可靠的实时判断依据。后端对过期 Token 通常返回标准状态码（如 401）或业务码（如 code: 10001），前端应在 axios/dio/uni.request 等统一响应拦截器中处理：

• 检查 status === 401 或 data.code === 10001，排除网络错误或业务异常干扰
• 立即清空本地 token、用户信息、过期时间戳等敏感数据（localStorage.removeItem('auth_token')）
• 用 window.location.replace 或 uni.reLaunch 跳转登录页，并携带当前路径：/login?from_url=%2Forder%2Fdetail%3Fid%3D123
• 务必 return Promise.reject()，防止上层 .then 继续执行导致白屏或逻辑错乱

路由前置守卫：第二道防线，覆盖直接访问与页面刷新

响应拦截器管不了用户手动输入 URL 或刷新页面。此时需在 router.beforeEach 中补全校验：

• 读取本地存储的 token 和其元数据（如 loginTime + expiresIn 或 expireTime）
• 若 token 为空，且目标路由不是 /login、/register 等免鉴权页，直接重定向到登录页并传参
• 若 token 存在，调用工具函数（如 TokenManager.isExpired()）比对毫秒级时间戳，避免字符串格式化误差
• 过期且目标非登录页 → 跳转 /login?from_url=xxx；未过期 → next()

登录成功还原：第三道闭环，精准跳回原页面

登录成功后不能无脑跳首页，否则用户体验断裂。应主动解析跳转参数：

• 从 URL query 中提取 from_url，做白名单校验（如 startsWith('/') 且不在黑名单中）
• 合法则用 router.push({ path: from_url }) 导航，非法则降级至默认页（如 /dashboard）
• 跳转前清除 from_url 参数，避免后续路由守卫重复触发重定向
• 特别注意：登录页自身守卫要加 if (to.name === 'Login') { next(); return; }，防止死循环

防坑要点：几个容易忽略但致命的细节

不处理好这些，轻则白屏卡顿，重则无限跳转或安全泄漏：

• 时间比较必须用毫秒数：Date.now() 对比 expireTime，禁用 toLocaleString() 等字符串操作
• localStorage 读取要 try-catch：JSON.parse 可能因数据损坏抛错，应视为 token 无效
• 双 Token 场景下 Refresh Token 不参与接口请求：它只用于静默换取新 Access Token，必须存于 HttpOnly Cookie 或安全存储
• 多个并发请求触发多次 401 时，需加锁机制：比如设置 isRefreshing = true，避免重复跳转登录页