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,