vue2/vue3路由權(quán)限管理的方法實例

更新時間：2021年06月15日 10:35:36 作者：想要飛翔的豬

最近用vue框架做了個后臺管理項目,涉及權(quán)限,所以下面這篇文章主要給大家介紹了關(guān)于vue2/vue3路由權(quán)限管理的相關(guān)資料,需要的朋友可以參考下

1. Vue 路由權(quán)限控制一般有2種方法

a、路由元信息(meta)
b、動態(tài)加載菜單和路由(addRoutes)

2 路由元信息（meta）來進(jìn)行路由權(quán)限控制

2.1 在vue2種的實現(xiàn)

如果一個網(wǎng)站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的

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

vue-router 在構(gòu)建路由時提供了元信息 meta 配置接口，我們可以在元信息中添加路由對應(yīng)的權(quán)限，然后在路由守衛(wèi)中檢查相關(guān)權(quán)限，控制其路由跳轉(zhuǎn)。

可以在每一個路由的 meta 屬性里，將能訪問該路由的角色添加到 roles 里。用戶每次登陸后，將用戶的角色返回。然后在訪問頁面時，把路由的 meta 屬性和用戶的角色進(jìn)行對比，如果用戶的角色在路由的 roles 里，那就是能訪問，如果不在就拒絕訪問。

以下是vue2的實現(xiàn)方式：

import VueRouter from 'vue-router';
Vue.use(VueRouter)
...
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')
  },
]

const router = new VueRouter({
  routes
})

export default router

在app.vue文件下引入，注冊全局的路由守衛(wèi)

//假設(shè)有兩種角色：admin 和 user 
//從后臺獲取的用戶角色
const role = 'user'
//當(dāng)進(jìn)入一個頁面是會觸發(fā)導(dǎo)航守衛(wèi) router.beforeEach 事件
router.beforeEach((to,from,next)=>{
  if(to.meta.roles.includes(role)){
   next() //放行
  }esle{
   next({path:"/404"}) //跳到404頁面
  }
})

自此基本上路由的權(quán)限控制就完成了

題外話在路由守衛(wèi)中也能很好的解決匹配不到路由轉(zhuǎn)404頁面的業(yè)務(wù)需求,實現(xiàn)如下：

import router from ‘./router‘
router.beforeEach((to, from, next) => {
   // ...
    if (to.matched.length === 0) {
        next('/404')
    } else {
        next()
    }
    //console.log(to, from, next, '路由守衛(wèi)')
})

2.2 在vue3種的實現(xiàn)

其實思路都是差不多的，只是要注意的是vue3中使用路由的方式和vue2有一些細(xì)微的差異，使用我用更簡單的404去創(chuàng)建vue3的實例，關(guān)于vue3的路由權(quán)限控制可以按vue2和下面代碼依葫蘆畫瓢，實現(xiàn)代碼如下：

創(chuàng)建路由：

import { createRouter, createWebHashHistory } from 'vue-router';
...
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')
  },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes: routers
})
export default router;

路由守衛(wèi)（在App.vue里面進(jìn)行全局注冊）：

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

4 . 動態(tài)加載菜單和路由(addRoutes)

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

5.總結(jié)

不管是vue2還是vue3，其實實現(xiàn)思想都差不多，只是使用接口細(xì)節(jié)會有少許的不一樣，使用對我們來說學(xué)習(xí)的重點千萬不能放在某一個框架上，而是要訓(xùn)練自己的思維

到此這篇關(guān)于vue2/vue3路由權(quán)限管理的文章就介紹到這了,更多相關(guān)vue路由權(quán)限管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: