登录拦截 / 路由拦截是怎么做的

2 小时前更新

• 入口：统一拦截 UniApp 路由方法

  • 在 [route.ts:L58-L65](file:///d:/work/code/wat-front-end-h5/src/interceptors/route.ts#L58-L65) 里通过 uni.addInterceptor 同时拦截了：
    • navigateTo / reLaunch / redirectTo / switchTab
  • 也就是说，不管你用哪种方式跳转，只要走 Uni 的路由 API，都进入同一套登录校验逻辑。

• 拦截逻辑：白名单 + 登录态判断

  • 核心逻辑在 [route.ts:L24-L55](file:///d:/work/code/wat-front-end-h5/src/interceptors/route.ts#L24-L55) 的 invoke({ url })：
    1. 从 url 里取 path（url.split('?')[0]）
    2. 获取“不需要登录”的白名单 unneedLoginPages
       • 开发环境：每次实时计算 getUnneedLoginPages()（避免改 pages.json 后白名单不更新）
       • 生产环境：使用预计算常量 _unneedLoginPages（减少运行时开销）
       • 这块对应 [route.ts:L31-L36](file:///d:/work/code/wat-front-end-h5/src/interceptors/route.ts#L31-L36)
    3. 如果当前 path 在白名单里，直接放行（return true）
    4. 否则检查 Pinia 登录态 useAuthStore().isLogined（见 [route.ts:L15-L19](file:///d:/work/code/wat-front-end-h5/src/interceptors/route.ts#L15-L19)）
    5. 未登录则跳登录页，并带上 redirect 参数用于登录后回跳：
       • const redirectRoute = $loginRoute?redirect=${url}``
       • uni.navigateTo({ url: redirectRoute })
       • 见 [route.ts:L51-L54](file:///d:/work/code/wat-front-end-h5/src/interceptors/route.ts#L51-L54)

• 白名单是怎么来的（从 pages.json 自动生成）

  • 白名单生成在 [index.ts:L71-L112](file:///d:/work/code/wat-front-end-h5/src/utils/index.ts#L71-L112)：
    • getAllPages('UnneedLogin')：遍历主包 pages + 分包 subPackages，筛 UnneedLogin: true 的页面，拼出统一的 path（以 / 开头）
    • getUnneedLoginPages()：返回这些 path 的数组
    • unneedLoginPages：在模块初始化时就算好（给生产环境用）
  • 这套设计的好处是：白名单不靠手写维护，而是跟着 pages.json 元数据走，减少漏配导致的线上拦截 bug。

• 401 的“登录态重置 + 重新登录”是怎么做的（请求层兜底）

  • 在 [http.ts:L52-L61](file:///d:/work/code/wat-front-end-h5/src/utils/http.ts#L52-L61) 里，uni.request 成功回调如果遇到 res.statusCode === 401：
    • toast 提示
    • 调用 resetAuthInfo()
  • resetAuthInfo() 在 [http.ts:L6-L22](file:///d:/work/code/wat-front-end-h5/src/utils/http.ts#L6-L22)：
    • 清空 authStore / adminStore（登录态、用户信息）
    • 跳登录页并带 redirect
    • 用 lodash-es/throttle 做节流，避免多个并发请求同时 401 导致“连续多次跳登录页”的灾难体验。

---

你简历第 4 点怎么写更“落地”

你原句：“登录拦截+路由拦截+权限控制” 信息密度不够。建议写成“做了什么机制 + 解决什么问题 + 关键实现点”。

给你 3 个可直接替换的版本（按强度递增）：

• 版本 A（简洁但具体）

  • 4. 设计并落地登录拦截与路由守卫：基于 pages.json 元数据自动生成白名单，统一拦截 navigateTo/reLaunch/redirectTo/switchTab；结合 401 请求兜底重置登录态与 redirect 回跳，避免并发 401 导致重复跳转。

• 版本 B（更偏工程化）

  • 4. 搭建统一鉴权链路（路由守卫 + 请求兜底）：路由层通过 UniApp interceptor 覆盖全部跳转 API，按 pages.json 自动维护白名单；请求层对 401 进行节流化登出与 redirect 回跳，保证高并发场景下不会多次弹登录/多次跳转。

• 版本 C（强调“权限控制”）

  • 4. 实现端到端鉴权与权限控制：路由层基于 pages.json 元数据自动生成免登白名单并拦截所有跳转；请求层统一处理 401，节流清理登录态并携带 redirect 回跳，保障未登录访问、会话过期、并发请求等场景体验一致。