詳解如何使用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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用Vue-cli3.0創(chuàng)建的項目 如何發(fā)布npm包
這篇文章主要介紹了使用Vue-cli3.0創(chuàng)建的項目,如何發(fā)布npm包,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
Vue3 封裝 element-plus 圖標選擇器實現步驟
這篇文章主要介紹了Vue3 封裝 element-plus 圖標選擇器,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09

