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也有刷新頁面數據丟失的問題，我就沒有繼續研究了。

　　可以點這里參考別人的博客