目錄

• 方式一：路由元資訊（meta）
• 方式二：動態生成路由表（addRoutes）

路由許可權控制常用於後臺管理系統中，對不同業務人員能夠訪問的頁面進行一個許可權的限制。

對於無許可權的頁面可以跳轉404頁面或者提示無許可權。

方式一：路由元資訊（meta）

把所有頁面都放在路由表中，只需要在訪問的時候判斷一下角色許可權即可。
-router 在構建路由時提供了元資訊 meta 配置介面，我們可以在元資訊中新增路由對應的許可權，然後在路由守衛中檢查相關許可權，控制其路由跳轉。

在 meta 屬性裡，將能訪問該路由的角色新增到 roles 裡。使用者每次登陸後，將使用者的角色返回。然後在訪問頁面時，把路由的 meta 屬性和使用者的角色進行對比，如果使用者的角色在路由的 roles 裡，那就是能訪問，如果不在就拒絕訪問。

示例一：通過roles判斷

const myRouter = new VueRouter({
 routes: [{
        path: '/login',name: 'login',meta: {
         roles: ['admin','user']
        },component: () => import('@/components/Login')
    },{
        path: '/home',name: 'home',meta: {
            roles: ['admin']
        },component: () => import('@/views/Home')
    },{
     path: '/404',component: () => import('@/components/404')
   }]
})

//假設通過介面從後臺獲取的使用者角色，可以儲存在token中
const role = 'user'

myRouter.beforeEach((to,from,next)=>{
 if(to.meta.roles.includes(role)){
  next() //放行
 }else{
  next({path:"/404"}) //跳到404頁面
 }
})

示例二：在需要加許可權的meta中加標識

const myRouter = new VueRouter({
 routes: [{
        path: '/login',meta: {
         title: '登入頁'
         icon: 'login'
        },meta: {
         title: '首頁'
         icon: 'home',requireAuth: true
        },component: () => import('@/components/404')
   }]
})

myRouter.beforeEach((to,next)=>{
 let flag = to.matched.some(record=>record.meta.requireAuth);
 //這裡使用matched迴圈查詢不直接使用to.meta的原因：
 //當存在子路由的情況時，首先明確按正常http://www.cppcns.com
 
點選邏輯來說是先走一級路由再進二級路由的，對於許可權的判斷也必然是這樣
 //to.meta => 會直接搜尋子路由的meta，如果一級路由沒有新增requireAuth:true， 則在一級路由頁面也本就應該被攔截無法進入二級路由頁面了；如果使用者直接篡改url位址列的話，則可以進入二級頁面，許可權可能會出現問題。則應該給該許可權下面的路由都新增標記
 //to.matched => matched是一個路由陣列，會將所有路由包括子路由的屬性集合起來，所以通過迴圈判斷查詢的方式，只需要給一級路由新增許可權標識即可許可權他下面的其他子路由。
 if(flag){
  next()
 }else{
  next({path:"/404"})
 }
})

缺點： 每次路由跳轉都要做一遍校驗是對計算資源的浪費，另外對於使用者無權訪問的路由，理論上就不應該掛載。

方式二：動態生成路由表（addRoutes）

根據使用者許可權或者是使用者屬性去動態的新增選單和路由表，可以實現對使用者的功能進行定製。
vue-router 提供了 addRoutes() 方法，可以動態註冊路由，需要注意的是，動態新增路由是在路由表中 push 路由，由於路由是按順序匹配的，因此需要將諸如404頁面這樣的路由放在動態新增的最後。

// store.
// 將需要動態註冊的路由提取到vuex中
const dynamicRoutes = [
  {
    path: '/manage',name: 'Manage',meta: {
      requireAuth: true
    },component: () => import('./views/Manage')
  },{
    path: '/userCenter',name: 'UserCenter',component: () => import('./views/UserCenter')
  }
]

在 vuex 中新增 userRoutes 陣列用於儲存使用者的定製選單。在 setUserInfo 中根據後端返回的選單生成使用者的路由表。

// store.js
setUserInfo (state,userInfo) {
  state.userInfo = userInfo
  state.auth = true // 獲取到使用者資訊的同時將auth標記為true，當然也可以直接判斷userInfo
  // 生成使用者路由表
  state.userRoutes = dynamicRoutes.filter(route => {
    return userInfo.menus.some(menu => menu.name === route.name)
  })
  router.addRoutes(state.userRoutes) // 註冊路由
}

修改選單渲染

// App.vue
<div id="nav">
   <router-link to="/">主頁</router-link>
   <router-link to="/login">登入</router-link>
   <template v-for="(menu,index) of $store.state.userInfo.menus">
     <router-link :to="{ name: menu.name }" :key="index">{{menu.titwww.cppcns.comle}}</router-link>
   </template>
</div>

到此這篇關於Vue實現兩種路由許可權控制方式的文章就介紹到這了,更多相關Vue 路由許可權控制內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！