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,