uniapp如何实现登录路由拦截？

今天再次介绍一下 uni-simple-router 插件，记得最初使用时，是在三年以前了，这里简单介绍通过自动读取 pages.json 作为路由表的方式，欢迎指教~

上一篇介绍.基本路由配置

快速上手，实现登录的路由拦截

效果图

路由守卫效果图

router.beforeEach ，to，from 数据结构

• App

• 微信小程序
  

• H5

修改相关文件

• 在上一篇.基本配置.基础上修改请查看

pages.json

• name 路由名称，例：通过 命名路由 方式跳转时使用；
• needLogin 表示 需要登录

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "simple-router"},"aliasPath": "/","name": "index","meta": {"needLogin": false}},{"path": "pages/deviceList/deviceList","style": {"navigationBarTitleText": "设备列表"},"name": "deviceList","meta": {"needLogin": true}},{"path": "pages/login/login","style": {"navigationBarTitleText": "登录"},"name": "login","meta": {"needLogin": false}},{"path": "pages/404/index","style": {"navigationBarTitleText": "404"},"name": "404","meta": {"needLogin": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "simple-router","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}
}

router.js

• 在全局路由守卫中beforeEach，处理登录逻辑
• to: 将要跳转的目标路由
• from: 从哪里来，来源路由
• next：next是个拦截函数
  • next() 无参数时，表示正常放行
  • next(false) 表示阻止通行，此时不能跳转
  • next(‘/’) 里面参数也可以是新路径，此时就会跳转到新路径
• 注意： 你可以会遇到无法获取 meta 的问题，需要在 vue.config.js 的 includes 中 添加 meta；

import {RouterMount,createRouter
} from 'uni-simple-router'const router = createRouter({platform: process.env.VUE_APP_PLATFORM,routes: [...ROUTES,{path: '*',redirect: (to) => {return {name: '404'}}}]
})// 全局路由前置守卫
router.beforeEach((to, from, next) => {// 判断是否已登录过，已登录直接 nextconst token = getToken(); // 获取 TOKEN，修改为自己方法if (token) {next();return;}// 判断是否需要登录if (to.meta.needLogin) {next({name: 'login',params: { // 路由参数jumpPath: to.fullPath // 完整路径}})} else {next();}
})// 全局路由后置守卫
router.afterEach((to, from) => {console.log('跳转结束');
})export {router,RouterMount
}

index.vue

<button type="primary" @click="routerTap">路由拦截</button>

routerTap() {uni.navigateTo({url: 'pages/deviceList/deviceList'})
}

login.vue

• 在登录页面，接收参数；

onLoad(options) {console.log('options：', options);if (options.jumpPath) this.jumpPath = decodeURIComponent(options.jumpPath);
}

• 处理 登录成功后，跳转 目标页面；
• 判断 路径是否来源 tabBar 执行不同跳转方式；

if (this.jumpPath) {let tmpBack = this.jumpPath;let tmpSplitVal = tmpBack.split('?')[0]; // 通过遍历 tabbarList 方式也是可以的let tabbarList = ['/pages/index/index', '/pages/setting/setting', '/pages/user/user'];if (tabbarList.indexOf(tmpSplitVal) != -1) {uni.switchTab({url: tmpBack})} else {uni.redirectTo({url: tmpBack})}
} else { // 没有参数，默认跳转所需页面 例：uni.redirectTo({url: '/pages/deviceList/deviceList'})
}

路由传参

路由跳转方式

• push
• pushTab：跳转 tabBar
• replace：替换
• replaceAll：替换所有
• back：返回第几层（数字）

uni 传参方式

uni.navigateTo({url: 'pages/login/login?name=smile'
})

query 传参方式

this.$Router.push({path: '/pages/login/login',query: {name: 'smile'}
})

params 传参方式

this.$Router.push({name: 'login',params: {name: '小不点~'}
})

注意

• path 和 query 配对使用
• name 和 params 配对使用