当前位置：首页 > news >正文

UniApp 路由导航守

news 2026/3/27 0:44:42

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'})}}