vue路由权限之访问权限(meta控制是否有访问权限)

首先登录那权限表

router.beforeEach((to, from, next) => {
    if(to.path === '/login') {
        next();
    }else{
            if(!store.getters.token){
              ..........此处省略
           }else{
                if(checkRoutePermission(to,store.getters.permission){
                      //登录的时候拿到permission(权限表)
                      next();
                }else {
            next('/error/502');//没有权限被输入权限路由跳错误页面
          }
           }
})


//回调函数

function checkRoutePermission(to,permissionList){

let isValidate=true;

to.matched.some(routeItem=>{

//全遍历路由记录的元字段

if(routeItem.meta.permissionPath){

isValidate=checkPermission(permissionList,routeItem.meta.permissionPath)!==null;

}

});

return isValidate;

}

 

//过滤权限的函数

export function checkPermission(permissionList,permissionPath){
let target=null;
permissionList.forEach(permissionItem=>{
if(permissionItem.path===permissionPath){
target=permissionItem;
return false;
}else{
if(permissionItem.children && permissionItem.children.length!==0){
target=checkPermission(permissionItem.children, permissionPath);
return target===null;
        }
}
})
return target;
}
原文地址:https://www.cnblogs.com/zhihou/p/9371605.html