vue 路由权限控制-beforeRouteEnter-根据权限code过滤整个路由

route.js

• 假设是拥有全部路由配置

const routes= [
    {
        path: '/',name: 'home',component: () => import('~/Home'),//按需加载
        redirect: '/menu1',children: [...]
    },
    { path: '/login', name: 'login', component: () => import('~/Login') },
    { path: "*", redirect: '/login' },
];
export default routes;

beforeRouteEnter组件内路由钩子鉴权

• 首先在Login.vue页面将登录返回的权限数据存储到本地localStorage或者sessionStorage
• routes为导入的路由

beforeRouteEnter (to, from, next) {
    const permission = localStorage.getItem('permission');//也可也使用sessionStorage，看实际情况需要
    if(!permission){//没有权限就直接退出
        next({ name: "login", replace: true });
    }
    const rightArr = JSON.parse(permission),
    //路由数据过滤无权限的页面并转为菜单数据
        transMenu = (arr, parebtPath = '/') => 
            arr.filter(item => rightArr.includes(item.meta.code)).map(item => ({
                path: parebtPath + item.path,//路由对应的全路径
                name: item.meta.name,//路由对应的中文名称
                icon: item.meta.icon,//路由对应的icon图标
                code: item.meta.code,//路由对应的权限code
                children: item.children ? transMenu(item.children, `${parebtPath}${item.path}/`) : null,
            })),
        menu = transMenu(routes[0].children);
    if(!menu.length){//没有菜单权限
        next({ name: "login", replace: true });
    }
    next(vm => {
        if(!rightArr.includes(to.meta.code)){//当前url没权限就跳转到第一个菜单
            vm.$router.replace(menu[0].path);
        }
        vm.menuData = menu;
        vm.$store.commit("setPermission", rightArr);
    })
}