快捷導(dǎo)航

Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式

更新時(shí)間：2021年10月29日 09:01:02 作者：草垛垛吖

路由權(quán)限控制常用于后臺(tái)管理系統(tǒng)中，對(duì)不同業(yè)務(wù)人員能夠訪問的頁面進(jìn)行一個(gè)權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制，具有一定的參考價(jià)值，感興趣的可以了解一下

方式一：路由元信息（meta）

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

在 meta 屬性里，將能訪問該路由的角色添加到 roles 里。用戶每次登陸后，將用戶的角色返回。然后在訪問頁面時(shí)，把路由的 meta 屬性和用戶的角色進(jìn)行對(duì)比，如果用戶的角色在路由的 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è)通過接口從后臺(tái)獲取的用戶角色，可以存儲(chǔ)在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)識(shí)

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

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

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

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

// store.js
// 將需要?jiǎng)討B(tài)注冊(cè)的路由提取到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ù)組用于存儲(chǔ)用戶的定制菜單。在 setUserInfo 中根據(jù)后端返回的菜單生成用戶的路由表。

// store.js
setUserInfo (state, userInfo) {
  state.userInfo = userInfo
  state.auth = true // 獲取到用戶信息的同時(shí)將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) // 注冊(cè)路由
}

修改菜單渲染

// 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實(shí)現(xiàn)兩種路由權(quán)限控制方式的文章就介紹到這了,更多相關(guān)Vue 路由權(quán)限控制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: