詳解如何使用Vuex實(shí)現(xiàn)Vue后臺管理中的角色鑒權(quán)
更新時(shí)間：2022年05月27日 16:23:48 作者：陸榮濤
最近參與了公司一個(gè)新的B端項(xiàng)目的研發(fā),從無到有搭建項(xiàng)目的過程中,遇到了關(guān)于項(xiàng)目鑒權(quán)的問題,這篇文章主要給大家介紹了關(guān)于如何使用Vuex實(shí)現(xiàn)Vue后臺管理中的角色鑒權(quán)的相關(guān)資料,需要的朋友可以參考下
前言
一直以來，我們使用vue做后臺管理時(shí)，不同角色的權(quán)限功能，都是我們老大難的問題，本篇文章我將手把你帶你實(shí)現(xiàn)vue后臺管理中的用戶角色權(quán)限功能！
功能分析
在常見管理系統(tǒng)中，超級管理員會給每個(gè)用戶分配角色，利于管理員角色、編輯人員角色、行政人員角色，不同角色在登錄時(shí)，我們側(cè)邊導(dǎo)航不一樣，可以訪問的路由也是不一樣的。
實(shí)現(xiàn)思路
常見的角色鑒權(quán)思路有兩種：
1 靜態(tài)的
通俗點(diǎn)將就是前端將 所有的導(dǎo)航數(shù)據(jù)以及所有的路由定死在前端，每個(gè)導(dǎo)航和路由新增roles屬性代表當(dāng)前路由或當(dāng)前導(dǎo)航可以訪問的角色有哪些，登錄時(shí)接口返回用戶角色 role，進(jìn)行判斷和過濾，實(shí)現(xiàn)鑒權(quán)
2 動態(tài)的
前端定定義基礎(chǔ)路由，用戶的導(dǎo)航數(shù)據(jù)和 路由數(shù)據(jù) 存儲在數(shù)據(jù)庫中，用戶登錄時(shí)，請求接口獲取當(dāng)前用戶可以訪問的路由和菜單，前端拿到數(shù)據(jù) 動態(tài)渲染導(dǎo)航，通過 vue路由 addRoute方法動態(tài)添加到路由中
代碼實(shí)現(xiàn)
本文，將結(jié)合vuex帶你手把手實(shí)現(xiàn)靜態(tài)角色鑒權(quán)思路（后續(xù)將會講解動態(tài)角色鑒權(quán)）
vuex中定義user模塊，存儲用戶信息以及用戶側(cè)邊導(dǎo)航數(shù)據(jù)
// 引入封裝好的 登錄的model 函數(shù)
import doLogin from '@/api'
export default {
namespaced: true,
state: {
// 用戶信息利用緩存?zhèn)浞莘乐顾⑿?取值時(shí)判斷緩存獲取
// 用戶的基礎(chǔ)信息 如nickName昵稱和avatar用戶頭像
userInfo: localStorate.getItem('userInfo')
?
JSON.parse(localStorate.getItem('userInfo'))
:
{}
,
// 登錄返回的token 秘鑰
token: localStorage.getItem('token') || '',
// 當(dāng)前用戶的角色
role: localStorage.getItem('role') || '',
// 所有的導(dǎo)航 以下是示例
menus: [
// 每個(gè)導(dǎo)航 新增roles屬性 代表可以訪問當(dāng)前用戶的所有的角色
{
label: '儀表盤',
path: '/dashBoard',
roles: ['admin', 'a', 'b', 'superAdmin'],
icon: 'el-icon-s-data'
},
{
label: '商品管理',
path: 'el-icon-s-goods',
icon: 'el-icon-s-data',
roles: ['admin', 'a', 'b', 'superAdmin']
},
{
label: '個(gè)人中心',
path: '/user',
roles: ['admin', 'a', 'b', 'superAdmin'],
icon: 'el-icon-user-solid'
},
{
label: '設(shè)置',
path: '/setting',
roles: ['a', 'b', 'superAdmin'],
icon: 'el-icon-s-tools'
}
]
},
getters: {
authMenus (state) {
// 定義getters 過濾當(dāng)前用戶的role不能訪問的導(dǎo)航
// 這就是當(dāng)前用戶role可以訪問的導(dǎo)航
return state.menus.filter(menu=> menu.roles.includes(state.role))
}
},
mutations: {
INIT_LOGIN (state, {userInfo, token, role}) {
// 登錄成功 存儲 用戶信息
state.userInfo = userInfo
state.token = token
state.role = role
// 緩存起來防止刷新 vuex狀態(tài)丟失
localStorage.setItem('userInfo', JSON.stringify(userInfo))
localStorage.setItem('token', token)
localStorage.setItem('role', role)
}
},
actions: {
DO_LOGIN ({commit}, params) {
// action中發(fā)送請求進(jìn)行登錄
doLogin(params).then(res => {
if(res.data.code === 200) {
// 請求成功觸發(fā)mutation存儲用戶信息 包括role
commit('INIT_LOGIN', {
userInfo: res.data.data.userInfo,
token: res.data.data.token,
role: res.data.data.role
})
}
})
}
}
}router中路由meta中新增roles 定義當(dāng)前路由可以訪問的所有的角色
const routes = [
{
path: '/',
component: Admin,
meta: {
roles: '*' // * 所有角色都可以訪問
},
children: [
{
path: '/',
redirect: '/dashBoard',
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/dashBoard',
name: '儀表盤',
component: () => import('_views/DashBoard'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/itemLists',
name: '商品管理',
component: () => import('_views/Items'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/itemAdd',
name: '增加商品',
component: () => import('_views/Items/components/ItemAdd'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/itemUpdate',
name: '修改商品',
component: () => import('_views/Items/components/ItemUpdate'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/cateLists',
name: '分類管理',
component: () => import('_views/Cate'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/user',
name: '個(gè)人中心',
component: () => import('_views/SetUser'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/setting',
name: '設(shè)置',
component: () => import('_views/Setting'),
meta: {
roles: ['a', 'b', 'superAdmin']
}
}
]
},
{
path: '/login',
component: () => import('_views/Login'),
meta: {
roles: '*'
}
},
{
path: '*',
component: () =>
import('_views/NotFound'),
meta: {
roles: '*'
}
},
{
path: '/noAuth',
component: () =>
import('_views/Nopermission'),
meta: {
roles: '*'
}
}
]router新增路由前置首位 做權(quán)限攔截
router.beforeEach((to, from, next) => {
//登錄鑒權(quán)
if (to.path !== '/login') {
if (isLogin()) {
/*
登錄成功后
判斷當(dāng)前用戶的角色 能否訪問當(dāng)前路由
可以的話 放行
不能 到?jīng)]有權(quán)限這個(gè)頁面去
*/
if (to.meta.roles === '*') {
// 所有用戶都可以訪問 直接放行
next()
} else {
// 判斷 roles中是否包含 用戶的role
const role = localStorage.getItem('role') || ''
if (to.meta.roles.includes(role)) {
next()
} else {
// 去沒有權(quán)限這個(gè)頁面 這是沒有權(quán)限路由需要自己創(chuàng)建一個(gè)
next('/noAuth')
}
}
} else {
next('/login')
}
} else {
next()
}
}側(cè)邊導(dǎo)航頁面 使用 getters中的 authMenus 循環(huán)側(cè)邊導(dǎo)航
<el-menu @select="choseMenu">
<div v-for="nav in $store.getters['user/authMenus ']" :key="nav.label">
<el-menu-item :index="nav.label" @click="switchNav(nav.path, nav.label)" v-if="!nav.children">
<i :class="nav.icon"></i>
<span slot="title">{{nav.label}}</span>
</el-menu-item>
<el-submenu :index="nav.label" v-if="nav.children">
<template slot="title">
<i :class="nav.icon"></i>
<span>{{nav.label}}</span>
</template>
<el-menu-item
v-for="subNav in nav.children"
:key="subNav.path"
:index="subNav.label"
@click="switchNav(subNav.path, subNav.label)">{{subNav.label}}</el-menu-item>
</el-submenu>
</div>
</el-menu>最后一步 登錄頁登錄時(shí)調(diào)用 請求登錄的action即可大功告成
this.$store.dispatch('user/DO_LOGIN',{
userName: 'xxx',
pwd: 'xxxx'
})總結(jié)
到此這篇關(guān)于如何使用Vuex實(shí)現(xiàn)Vue后臺管理中的角色鑒權(quán)的文章就介紹到這了,更多相關(guān)Vuex實(shí)現(xiàn)角色鑒權(quán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue頁面加載時(shí)的進(jìn)度條功能(實(shí)例代碼)
這篇文章主要介紹了vue頁面加載時(shí)的進(jìn)度條功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
elementui 開始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui 開始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼,需要先在main.js中導(dǎo)入相應(yīng)代碼,代碼簡單易懂,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue語法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用，需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片加載完成前的loading組件，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于Vue 3.x+axios跨域方案的踩坑指南，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue 3.x具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue中使用Ueditor的方法，本文通過實(shí)例給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
詳解Vue 項(xiàng)目中的幾個(gè)實(shí)用組件（ts）
這篇文章主要介紹了詳解Vue 項(xiàng)目中的幾個(gè)實(shí)用組件（ts），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機(jī)制(bus)的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了VUE預(yù)渲染及遇到的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09