🚀 用 17 行代码给 UniApp 加上全局登录拦截

说实话，这事我憋挺久了。

早期写 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 个动作：

1. 先过白名单：首页、登录页、我的页，3 个公开页面直接放行。
2. 然后查 token：storage 里有就继续走。
3. 查不到的，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

示例项目：github.com/skiyee/oiyo...

使用文档：oiyo.js.org/docs/manual...

欢迎在评论区告诉我：你们项目的登录拦截是怎么做的？如果有比 17 行更省的方案，分享探讨！

---

我是 skiyee 也可以叫我 sky。如果觉得有用，随手点个赞👍、收藏💚吧！