把所有頁面都放在路由表中，只需要在訪問的時候判斷一下角色權(quán)限即可。
vue-router 在構(gòu)建路由時提供了元信息 meta 配置接口，我們可以在元信息中添加路由對應(yīng)的權(quán)限，然后在路由守衛(wèi)中檢查相關(guān)權(quán)限，控制其路由跳轉(zhuǎn)。

在 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')
   }]
})

//假設(shè)通過接口從后臺獲取的用戶角色，可以存儲在token中
const role = 'user'

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

示例二：在需要加權(quán)限的meta中加標(biāo)識

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

myRouter.beforeEach((to,from,next)=>{
 let flag = to.matched.some(record=>record.meta.requireAuth);
 //這里使用matched循環(huán)查找不直接使用to.meta的原因：
 //當(dāng)存在子路由的情況時，首先明確按正常點擊邏輯來說是先走一級路由再進二級路由的，對于權(quán)限的判斷也必然是這樣
 //to.meta => 會直接搜索子路由的meta，如果一級路由沒有添加requireAuth:true， 則在一級路由頁面也本就應(yīng)該被攔截?zé)o法進入二級路由頁面了；如果用戶直接篡改url地址欄的話，則可以進入二級頁面，權(quán)限可能會出現(xiàn)問題。則應(yīng)該給該權(quán)限下面的路由都添加標(biāo)記
 //to.matched => matched是一個路由數(shù)組，會將所有路由包括子路由的屬性集合起來，所以通過循環(huán)判斷查找的方式，只需要給一級路由添加權(quán)限標(biāo)識即可權(quán)限他下面的其他子路由。
 if(flag){
  next()
 }else{
  next({path:"/404"})
 }
})

缺點：每次路由跳轉(zhuǎn)都要做一遍校驗是對計算資源的浪費，另外對于用戶無權(quán)訪問的路由，理論上就不應(yīng)該掛載。

方式二：動態(tài)生成路由表（addRoutes）

根據(jù)用戶權(quán)限或者是用戶屬性去動態(tài)的添加菜單和路由表，可以實現(xiàn)對用戶的功能進行定制。
vue-router 提供了 addRoutes() 方法，可以動態(tài)注冊路由，需要注意的是，動態(tài)添加路由是在路由表中 push 路由，由于路由是按順序匹配的，因此需要將諸如404頁面這樣的路由放在動態(tài)添加的最后。

// store.js
// 將需要動態(tài)注冊的路由提取到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')
  }
]

在 vuex 中添加 userRoutes 數(shù)組用于存儲用戶的定制菜單。在 setUserInfo 中根據(jù)后端返回的菜單生成用戶的路由表。

// store.js
setUserInfo (state, userInfo) {
  state.userInfo = userInfo
  state.auth = true // 獲取到用戶信息的同時將auth標(biāo)記為true，當(dāng)然也可以直接判斷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.title}}</router-link>
   </template>
</div>

到此這篇關(guān)于Vue實現(xiàn)兩種路由權(quán)限控制方式的文章就介紹到這了,更多相關(guān)Vue 路由權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: