vue路由鉴权（动态路由）

一个系统有多个角色，不同角色登录后应该有不同的路由表，保证用户乱输url不会访问到正确的地址，而是跳转到404页面。

方法一：在路由信息的meta中新增拥有当前权限的角色

routes: [
  {
    path: '/login',
    name: 'login',
    meta: {
      roles: ['admin', 'user']
    },
    component: () => import('../components/Login.vue')
  },
  {
    path: 'home',
    name: 'home',
    meta: {
      roles: ['admin']
    },
    component: () => import('../views/Home.vue')
  },
]

　　然后在router.beforeEach中控制路由是否展示

//假设有三种角色：admin 和 user 和manager
//从后台获取的用户角色,一个用户可能有多个角色
const role = [admin,user]  //从localStorage中获取
//当进入一个页面是会触发导航守卫 router.beforeEach 事件
router.beforeEach((to,from,next)=>{ 
 const auth = role.filter((item) => to.meta.roles.includes(item));  //两个数组有交集，就放行
 if(auth.length){
 next() //放行
 }esle{
 next({path:"/404"}) //跳到404页面
 }
})

　　拓展：使用router.beforeEach时，发现刷新页面，不会触发router.beforeEach，百度后发现，将router绑定到new Vue的app上的顺序，需要在main.js的底部，也就是要先写router.beforeEach函数，再将router绑定到vue根实例上。

 

方法二：route.js中默认只有login和register的页面路由，其余路由都是通过vue-router的addRouter来添加的，需要注意的是，动态添加路由是在路由表中 push 路由，由于路由是按顺序匹配的，因此需要将诸如404页面这样的路由放在动态添加的最后。

// dynamicRoutes.js
// 将需要动态注册的路由提取到vuex中
const dynamicRoutes = [
 {
  path: '/manage',
  name: 'Manage',
  meta: {
   requireAuth: true
  },
  component: () => import('./views/Manage')
 },
 {
  path: '/userCenter',
  name: 'UserCenter',
  meta: {
   requireAuth: true
  },
  component: () => import('./views/UserCenter')
 }
]

　　登录后在路由跳转之前，调接口获取当前用户的角色的路由权限表，将表数据存到sessionStorage的routers中，然后和上面要引入的dynamicRoutes做双向深度递归遍历，将有权限的路由筛选出来，然后this.$router.addRoutes(筛选后的路由)，然后再进行路由的跳转。这样登录之后，正常的路由跳转是没有问题，但是一刷新就完蛋了，因为刷新后router.js就重新初始化了，动态的路由表不见了。这时候刚刚存储在sessionStorage的routers就起作用了，我本来打算将刷新后的动态路由添加放在根目录的created中，后来发现这样不行。于是就直接将这一层判断放到了main.js中

// main.js
import dynamicRoutes from '../routes/dynamicRoutes.js';
import router from 'vue-router'
let localRoutes = sessionStorage.getItem('routers');
if (localRoutes) {
    const route =  dynamicRoutes.filter((item) => localRoutes.includes(item)) //多层级路由要递归遍历;
    router.addRoutes(route);
}

　　这样就实现了刷新页面也可以获取到sessionStorage里面的数据。这里的存储位置放在vuex中也可以，不过vuex也有刷新页面数据丢失的问题，我就没有继续研究了。

　　可以点这里参考别人的博客