UniApp 路由导航守

UniApp 路由导航守

大家平时做 Vue 项目，路由守卫基本都是标配：beforeEach 一写，白名单、token 校验、跳转拦截一气呵成。

但换到 UniApp 就会发现一个问题：没有 Vue-Router，也没有 beforeEach。

很多人刚上手都会懵：路由守卫到底怎么写？

其实 UniApp 有自己的方案，就是官方提供的拦截器（interceptor），今天就把完整可落地、直接复制粘贴的路由守卫给你们。

Vue 里是这样写的

router.beforeEach((to,from,next)=>{if(to.path==='/login')returnnext()consttoken=sessionStorage.getItem('token')if(!token)returnnext('/login')next()})

逻辑很简单：

• 白名单直接过
• 没 token 跳登录
• 有 token 正常跳转

但 UniApp 不这套，它的页面跳转全靠：

• uni.navigateTo
• uni.redirectTo
• uni.reLaunch
• uni.switchTab

所以思路也很直接：把这几个 API 全部拦截，自己做校验。

UniApp 路由守卫核心：拦截器

官方文档里其实写得很清楚：
uni.addInterceptor可以拦截几乎所有 uni 开头的 API，包括路由、请求、扫码、支付等等。

路由守卫，本质就是：
拦截路由跳转 → 判断权限 → 放行 / 拦截跳登录

拦截器最重要的就是一个方法：
invoke(args)

• return true ＝ 放行
• return false ＝ 拦截，不执行原来的跳转

懂这个，整个路由守卫就通了。

直接上代码：utils/interceptor.js

// 全局路由拦截器（路由守卫）// 在 App.vue onLaunch 中调用一次即可// 白名单：不需要登录就能访问的页面constwhiteList=newSet(['/pages/login/login',// '/pages/register/register', 想加就加])// 核心校验逻辑functioncheckAuth(url){// 截取纯路径，忽略 ? 参数constpath=url.split('?')[0]// 白名单直接放行if(whiteList.has(path)){returntrue}// 校验 tokenconsttoken=uni.getStorageSync('token')return!!token}// 拦截器配置constrouteInterceptor={invoke(args){console.log('即将跳转：',args.url)// 校验通过，正常跳转if(checkAuth(args.url)){returntrue}// 未登录 → 跳登录，并把原来要跳的地址带上uni.redirectTo({url:`/pages/login/login?redirect=${encodeURIComponent(args.url)}`})// 拦截本次路由跳转returnfalse}}// 注册所有路由拦截exportfunctioninitRouteGuard(){uni.addInterceptor('navigateTo',routeInterceptor)uni.addInterceptor('redirectTo',routeInterceptor)uni.addInterceptor('reLaunch',routeInterceptor)uni.addInterceptor('switchTab',routeInterceptor)}

在 App.vue 中启用（非常关键）

为什么必须写在onLaunch？

因为：
拦截器必须在任何页面跳转之前就注册好
onLaunch 是应用启动最早的生命周期，只执行一次，最适合干这事。

<script> import { initRouteGuard } from '@/utils/interceptor.js' export default { onLaunch() { // 启动路由守卫 initRouteGuard() }, onShow() {}, onHide() {} } </script>

登录成功后如何“回跳原来页面”

拦截时我们拼了一个redirect参数：

/login?redirect=xxx

登录成功后这样跳回去就行：

asyncfunctionlogin(){// 登录请求...consttoken=res.data.token uni.setStorageSync('token',token)// 获取当前页面实例constpages=getCurrentPages()constcurrent=pages[pages.length-1]constredirect=current.options.redirectif(redirect){// 跳回原来想访问的页面uni.redirectTo({url:decodeURIComponent(redirect)})}else{// 默认跳首页或 tabBaruni.switchTab({url:'/pages/home/home'})}}

一些实用小细节

1. tabBar 页面也能拦截
   switchTab 已经包含在拦截里，没 token 照样跳登录。

2. 路径一定要写完整
   /pages/login/login别写错，不然白名单不生效。

3. navigateBack 一般不用拦截
   返回上一页通常不需要权限，除非你有特殊场景。

4. 可扩展权限控制
   想加角色、验过期、验状态，直接在checkAuth里加逻辑就行，非常灵活。

总结

• UniApp 没有 beforeEach，但能用uni.addInterceptor实现一模一样的效果
• 拦截 navigateTo / redirectTo / reLaunch / switchTab 四个 API 就够覆盖所有路由
• 白名单 + token 校验 = 最常用路由守卫
• 必须在 App.vue onLaunch 里初始化，否则不生效
• 代码直接复制，改改页面路径就能上线

这套写法我在好几个 UniApp 项目里都在用，H5、小程序、App 全端稳定，没坑。