UniApp 路由导航守大家平时做 Vue 项目路由守卫基本都是标配beforeEach 一写白名单、token 校验、跳转拦截一气呵成。但换到 UniApp 就会发现一个问题没有 Vue-Router也没有 beforeEach。很多人刚上手都会懵路由守卫到底怎么写其实 UniApp 有自己的方案就是官方提供的拦截器interceptor今天就把完整可落地、直接复制粘贴的路由守卫给你们。Vue 里是这样写的router.beforeEach((to,from,next){if(to.path/login)returnnext()consttokensessionStorage.getItem(token)if(!token)returnnext(/login)next()})逻辑很简单白名单直接过没 token 跳登录有 token 正常跳转但 UniApp 不这套它的页面跳转全靠uni.navigateTouni.redirectTouni.reLaunchuni.switchTab所以思路也很直接把这几个 API 全部拦截自己做校验。UniApp 路由守卫核心拦截器官方文档里其实写得很清楚uni.addInterceptor可以拦截几乎所有 uni 开头的 API包括路由、请求、扫码、支付等等。路由守卫本质就是拦截路由跳转 → 判断权限 → 放行 / 拦截跳登录拦截器最重要的就是一个方法invoke(args)return true 放行return false 拦截不执行原来的跳转懂这个整个路由守卫就通了。直接上代码utils/interceptor.js// 全局路由拦截器路由守卫// 在 App.vue onLaunch 中调用一次即可// 白名单不需要登录就能访问的页面constwhiteListnewSet([/pages/login/login,// /pages/register/register, 想加就加])// 核心校验逻辑functioncheckAuth(url){// 截取纯路径忽略 ? 参数constpathurl.split(?)[0]// 白名单直接放行if(whiteList.has(path)){returntrue}// 校验 tokenconsttokenuni.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?redirectxxx登录成功后这样跳回去就行asyncfunctionlogin(){// 登录请求...consttokenres.data.token uni.setStorageSync(token,token)// 获取当前页面实例constpagesgetCurrentPages()constcurrentpages[pages.length-1]constredirectcurrent.options.redirectif(redirect){// 跳回原来想访问的页面uni.redirectTo({url:decodeURIComponent(redirect)})}else{// 默认跳首页或 tabBaruni.switchTab({url:/pages/home/home})}}一些实用小细节tabBar 页面也能拦截switchTab 已经包含在拦截里没 token 照样跳登录。路径一定要写完整/pages/login/login别写错不然白名单不生效。navigateBack 一般不用拦截返回上一页通常不需要权限除非你有特殊场景。可扩展权限控制想加角色、验过期、验状态直接在checkAuth里加逻辑就行非常灵活。总结UniApp 没有 beforeEach但能用uni.addInterceptor实现一模一样的效果拦截 navigateTo / redirectTo / reLaunch / switchTab 四个 API 就够覆盖所有路由白名单 token 校验 最常用路由守卫必须在 App.vue onLaunch 里初始化否则不生效代码直接复制改改页面路径就能上线这套写法我在好几个 UniApp 项目里都在用H5、小程序、App 全端稳定没坑。