这篇文章主要介绍“怎么使用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后台管理中的角色鉴权”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
