说实话，这事我憋挺久了。
早期写 UniApp 的时候，我就琢磨着给路由套一层守卫，可惜一直没有顺手的落点。
oiyo 出现之后，这个想法才算落地。于是有了新功能：middleware
这 17 行的全局登录拦截，就是它的功劳。
前往了解 oiyo 框架：oiyo.js.org
一、先说为什么
写过 Vue 的都知道 router.beforeEach：页面跳出去之前，会先过一道「安检」，但 UniApp 没有这东西。
有人会提 uni.addInterceptor（听起来挺美好），它能拦 uni.navigateTo 这类跳转 API。
但你想想这三个入口，它们压根不走跳转 API，一个都拦不住：
- 扫码直达
- 点分享卡片进页面
- H5 直接输 URL
拦住了跳转，拦不住入口。
这是 UniApp 路由的先天缺点（但这不是 UniApp 的问题）。
剩下的办法就笨了：每个页面 onLoad 里查一遍登录状态。页面一多，总有一页会忘了补（然后翻车😂）。
所以我在 oiyo 里内置了 middleware 机制。这种机制你可以理解成路由的门卫：页面进门前，它先看一眼证件。
二、17 行，直接看
在 oiyo 项目里，只需要在 src/middlewares 目录创建一个 auth.global.ts：
总共 3 个动作：
- 先过白名单：首页、登录页、我的页，3 个公开页面直接放行。
- 然后查 token：storage 里有就继续走。
- 查不到的，
return goTo送去登录页，当前目标路径作为redirect参数一起带过去，方便登录后跳转。
闭环我也顺手做完了：登录页 onLoad 里读 redirect，登录成功 reLaunch 回原页面。
被拦下来（用户想到达某个页面）→ 去登录页（redirect 记住原目标）→ 登录成功（reLaunch 回到原页面）
只要 Ta 登录完成，那就会回到他本来要去的地方。
有两个细节我特别喜欢。
一是文件名带 .global 后缀就全局生效，不用在任何页面里声明，零注册。
二是 defineRouteMiddleware 和 goTo 都是自动导入的，整个文件 0 行 import。
✦ 顺便一提：登录页里的
ref和onLoad同样零 import，全靠自动导入。
三、控制方向
middleware 的全部规则，收在返回值上：
return true | void—— 放行return false | abortNavigation—— 拦下，用户留在当前页return goTo—— 重定向
登录校验、权限校验、埋点、强制跳转，都可以由这 3 个行为控制。
四、怎么体验
一句话：约定优于配置。文件放对目录，事情就自动发生。
快速创建：
pnpm create oiyo@latest
欢迎在评论区告诉我：你们项目的登录拦截是怎么做的？如果有比 17 行更省的方案，分享探讨！
我是 skiyee 也可以叫我 sky。如果觉得有用，随手点个赞👍、收藏💚吧！
