詳解如何使用Vuex實現Vue后臺管理中的角色鑒權
更新時間：2022年05月27日 16:23:48 作者：陸榮濤
最近參與了公司一個新的B端項目的研發(fā),從無到有搭建項目的過程中,遇到了關于項目鑒權的問題,這篇文章主要給大家介紹了關于如何使用Vuex實現Vue后臺管理中的角色鑒權的相關資料,需要的朋友可以參考下
前言
一直以來，我們使用vue做后臺管理時，不同角色的權限功能，都是我們老大難的問題，本篇文章我將手把你帶你實現vue后臺管理中的用戶角色權限功能！
功能分析
在常見管理系統中，超級管理員會給每個用戶分配角色，利于管理員角色、編輯人員角色、行政人員角色，不同角色在登錄時，我們側邊導航不一樣，可以訪問的路由也是不一樣的。
實現思路
常見的角色鑒權思路有兩種：
1 靜態(tài)的
通俗點將就是前端將 所有的導航數據以及所有的路由定死在前端，每個導航和路由新增roles屬性代表當前路由或當前導航可以訪問的角色有哪些，登錄時接口返回用戶角色 role，進行判斷和過濾，實現鑒權
2 動態(tài)的
前端定定義基礎路由，用戶的導航數據和 路由數據 存儲在數據庫中，用戶登錄時，請求接口獲取當前用戶可以訪問的路由和菜單，前端拿到數據 動態(tài)渲染導航，通過 vue路由 addRoute方法動態(tài)添加到路由中
代碼實現
本文，將結合vuex帶你手把手實現靜態(tài)角色鑒權思路（后續(xù)將會講解動態(tài)角色鑒權）
vuex中定義user模塊，存儲用戶信息以及用戶側邊導航數據
// 引入封裝好的 登錄的model 函數
import doLogin from '@/api'
export default {
namespaced: true,
state: {
// 用戶信息利用緩存?zhèn)浞莘乐顾⑿?取值時判斷緩存獲取
// 用戶的基礎信息 如nickName昵稱和avatar用戶頭像
userInfo: localStorate.getItem('userInfo')
?
JSON.parse(localStorate.getItem('userInfo'))
:
{}
,
// 登錄返回的token 秘鑰
token: localStorage.getItem('token') || '',
// 當前用戶的角色
role: localStorage.getItem('role') || '',
// 所有的導航 以下是示例
menus: [
// 每個導航 新增roles屬性 代表可以訪問當前用戶的所有的角色
{
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: '個人中心',
path: '/user',
roles: ['admin', 'a', 'b', 'superAdmin'],
icon: 'el-icon-user-solid'
},
{
label: '設置',
path: '/setting',
roles: ['a', 'b', 'superAdmin'],
icon: 'el-icon-s-tools'
}
]
},
getters: {
authMenus (state) {
// 定義getters 過濾當前用戶的role不能訪問的導航
// 這就是當前用戶role可以訪問的導航
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ā)送請求進行登錄
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 定義當前路由可以訪問的所有的角色
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: '個人中心',
component: () => import('_views/SetUser'),
meta: {
roles: ['admin', 'a', 'b', 'superAdmin']
}
},
{
path: '/setting',
name: '設置',
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新增路由前置首位 做權限攔截
router.beforeEach((to, from, next) => {
//登錄鑒權
if (to.path !== '/login') {
if (isLogin()) {
/*
登錄成功后
判斷當前用戶的角色 能否訪問當前路由
可以的話 放行
不能 到沒有權限這個頁面去
*/
if (to.meta.roles === '*') {
// 所有用戶都可以訪問 直接放行
next()
} else {
// 判斷 roles中是否包含 用戶的role
const role = localStorage.getItem('role') || ''
if (to.meta.roles.includes(role)) {
next()
} else {
// 去沒有權限這個頁面 這是沒有權限路由需要自己創(chuàng)建一個
next('/noAuth')
}
}
} else {
next('/login')
}
} else {
next()
}
}側邊導航頁面 使用 getters中的 authMenus 循環(huán)側邊導航
<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>最后一步 登錄頁登錄時調用 請求登錄的action即可大功告成
this.$store.dispatch('user/DO_LOGIN',{
userName: 'xxx',
pwd: 'xxxx'
})總結
到此這篇關于如何使用Vuex實現Vue后臺管理中的角色鑒權的文章就介紹到這了,更多相關Vuex實現角色鑒權內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
CryptoJS是一個強大的JavaScript庫,它提供了多種加密解密功能,尤其是AES加密方法,使用CryptoJS,我們可以有效地保護數據安全,防止信息泄露,通過簡單的安裝和函數編寫,本文給大家介紹Vue3 如何使用CryptoJS加密,感興趣的朋友一起看看吧2024-10-10
Pinia?是?Vue.js?的輕量級狀態(tài)管理庫,最近很受歡迎,它使用?Vue?3?中的新反應系統來構建一個直觀且完全類型化的狀態(tài)管理庫,下面就跟隨小編一起來學習一下它的具體使用吧2023-10-10
這篇文章主要介紹了vuex的使用和簡易實現，幫助大家更好的理解和使用vuex，感興趣的朋友可以了解下2021-01-01
使用Vue-cli3.0創(chuàng)建的項目 如何發(fā)布npm包
這篇文章主要介紹了使用Vue-cli3.0創(chuàng)建的項目，如何發(fā)布npm包,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
最近小編遇到這樣的問題，多組關鍵詞，這里實現了關鍵詞的背景色與匹配值的字體顏色值相同，下面通過定義關鍵詞匹配改變字體顏色，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2019-07-07
路由傳參主要有兩種方式一種是路徑傳參一種是參數傳遞,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
Vue是一套構建用戶界面的框架,最近工作中遇到了一個需求,需要做一個更新頭像的通能,下面這篇文章主要給大家介紹了關于利用nodeJS+vue圖片上傳的相關資料,需要的朋友可以參考下2022-04-04
Vue3 封裝 element-plus 圖標選擇器實現步驟
這篇文章主要介紹了Vue3 封裝 element-plus 圖標選擇器,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了vue.js的安裝方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01