這篇文章主要介紹“怎么使用Vuex實現Vue后臺管理中的角色鑒權”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么使用Vuex實現Vue后臺管理中的角色鑒權”文章能幫助大家解決問題。
在常見管理系統中，超級管理員會給每個用戶分配角色，利于管理員角色、編輯人員角色、行政人員角色，不同角色在登錄時，我們側邊導航不一樣，可以訪問的路由也是不一樣的。
常見的角色鑒權思路有兩種：
1 靜態的
通俗點將就是前端將 所有的導航數據以及所有的路由定死在前端，每個導航和路由新增roles屬性代表當前路由或當前導航可以訪問的角色有哪些，登錄時接口返回用戶角色 role，進行判斷和過濾，實現鑒權
2 動態的
前端定定義基礎路由，用戶的導航數據和 路由數據 存儲在數據庫中，用戶登錄時，請求接口獲取當前用戶可以訪問的路由和菜單，前端拿到數據 動態渲染導航，通過 vue路由 addRoute方法動態添加到路由中
// 引入封裝好的 登錄的model 函數
import doLogin from '@/api'
export default {
namespaced: true,
state: {
// 用戶信息利用緩存備份防止刷新 取值時判斷緩存獲取
// 用戶的基礎信息 如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狀態丟失
localStorage.setItem('userInfo', JSON.stringify(userInfo))
localStorage.setItem('token', token)
localStorage.setItem('role', role)
}
},
actions: {
DO_LOGIN ({commit}, params) {
// action中發送請求進行登錄
doLogin(params).then(res => {
if(res.data.code === 200) {
// 請求成功觸發mutation存儲用戶信息 包括role
commit('INIT_LOGIN', {
userInfo: res.data.data.userInfo,
token: res.data.data.token,
role: res.data.data.role
})
}
})
}
}
}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.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 {
// 去沒有權限這個頁面 這是沒有權限路由需要自己創建一個
next('/noAuth')
}
}
} else {
next('/login')
}
} else {
next()
}
} <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>this.$store.dispatch('user/DO_LOGIN',{
userName: 'xxx',
pwd: 'xxxx'
})關于“怎么使用Vuex實現Vue后臺管理中的角色鑒權”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
