1. vue 路由許可權控制一般有2種方法

a、路由元資訊(meta)
b、動態載入選單和路由(addRoutes)

2 路由元資訊（meta）來進行路由許可權控制

2.1 在vue2種的實現

如果一個網站有不同的角色，比如 管理員 和 普通使用者 ，要求不同的角色能訪問的頁面是不一樣的

這個時候我們就可以 把所有的頁面都放在路由表裡 ，只要 在訪問的時候判斷一下角色許可權 。如果有許可權就讓訪問，沒有許可權的話就拒絕訪問，跳轉到404頁面

vue-router 在構建路由時提供了元資訊 meta 配置介面，我們可以在元資訊中新增路由對應的許可權，然後在路由守衛中檢查相關許可權，控制其路由跳轉。

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

以下是vue2的實現方式：

import VueRouter from 'vue-router';
Vue.use(VueRouter)
...
routes: [
  {
    path: '/login',name: 'login',meta: {
      roles: ['admin','user']
    },www.cppcns.com
 
   component: () => import('../components/Login.vue')
  },{
    path: 'home',name: 'home',meta: {
      roles: HdyNnSKXn['admin']
    },component: () => import('../views/Home.vue')
  },]

const router = new VueRouter({
  routes
})

export default router

在http://www.cppcns.comapp.vue檔案下引入，註冊全域性的路由守衛

//假設有兩種角色：admin 和 user 
//從後臺獲取的使用者角色
const role = 'user'
//當進入一個頁面是會觸發導航守衛 router.beforeEach 事件
router.beforeEach((to,from,next)=>{
  if(to.meta.roles.includes(role)){
   next() //放行
  }esle{
   next({path:"/404"}) //跳到404頁面
  }
})

自此基本上路由的許可權控制就完成了

題外話 在路由守衛中也能很好的解決匹配不到路由轉404頁面的業務需求,實現如下：

import router from ‘./router‘
router.beforeEach((to,next) => {
   //程式設計客棧 ...
    if (to.matched.length === 0) {
        next('/404')
    } else {
        next()
    }
    //console.log(to,next,'路由守衛')
})

2.2 在vue3種的實現

其實思路都是差不多的，只是要注意的是vue3中使用路由的方式和vue2有一些細微的差異，使用我用更簡單的404去建立vue3的例項，關於vue3的路由許可權控制可以按vue2和下面程式碼依葫蘆畫瓢，實現程式碼如下：

建立路由：

import { createRouter,createWebHashHistory } from 'vue-router';
...
routes: [
  {
    path: '/login',component: () => import('../components/Login.vue')
  },meta: {
      roles: ['admin']
    },]
const router = createRouter({
    history: createWebHashHistory(),routes: routers
}http://www.cppcns.com)
export default router;

路由守衛（在App.vue裡面進行全域性註冊）：

import {
    useRouter
} from 'vue-router';
export default {
    name: 'App',setup() {
        const router = useRouter();
        router.beforeEach((to,next) => {
            // ...
            if (to.matched.length === 0) {
                next('/404')
            } else {
                next()
            }
        })
    }
}

4 . 動態載入選單和路由(addRoutes)

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

5.總結

不管是vue2還是vue3，其實實現思想都差不多，只是使用介面細節會有少許的不一樣，使用對我們來說學習的重點千萬不能放在某一個框架上，而是要訓練自己的思維

到此這篇關於vue2/vue3路由許可權管理的文章就介紹到這了,更多相關vue路由許可權管理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！