uniapp路由权限拦截守卫

uniapp中没有向vue中router的路由管理插件，官方提供uni.addInterceptor这个API去控制，这个方法可在进入到页面之前就拦截相应的跳转，就不存在在需登录页面加载展示之后再跳转到登录页面，操作如下

1、在uitls的文件夹下，新建permission.js文件

// 页面白名单，这里放的是不需要登录的页面
const whiteList=['/pages/home/index','/pages/login/index',
]
const loginPage="/pages/login/index";
export default function initPermission(){const routeFnList=["navigateTo","redirectTo","reLaunch","switchTab"]routeFnList.forEach(item=>{uni.addInterceptor(item,{invoke(e){//这里判断用户有没有登录，如果项目较大，可使用store状态去判断，依个人情况const token=uni.getStorageSync("token");const url=e.url.split("?")[0];let notNeed=whiteList.includes(url)		if(notNeed){return e}else{if(!token){uni.showToast({title:"请登录",icon:"none"})uni.navigateTo({url:loginPage})return false}else{return e}}},success(res){},fail(err){}	})		})}

2、在App.vue的文件中，引入permission.js文件并执行

<!-- App.vue -->
<template></template>
<script>
import initPermission from "@/utils/permission.js"export default {onLaunch:async function() {//这里调用此函数就行initPermission()},methods:{}onHide: function() {}}
</script><style lang="scss">
</style>

3、注意事项

1、如果咱们用的自带的底部tabbar，tababr的跳转该拦截器是无法拦截，需要使用自定的底部tabbar,