详解如何使用Vuex实现Vue后台管理中的角色鉴权
前言
一直以来,我们使用vue做后台管理时,不同角色的权限功能,都是我们老大难的问题,本篇文章我将手把你带你实现vue后台管理中的用户角色权限功能!
功能分析
在常见管理系统中,超级管理员会给每个用户分配角色,利于管理员角色、编辑人员角色、行政人员角色,不同角色在登录时,我们侧边导航不一样,可以访问的路由也是不一样的。
实现思路
常见的角色鉴权思路有两种:
1 静态的
通俗点将就是前端将 所有的导航数据以及所有的路由定死在前端,每个导航和路由新增roles属性代表当前路由或当前导航可以访问的角色有哪些,登录时接口返回用户角色 role,进行判断和过滤,实现鉴权
2 动态的
前端定定义基础路由,用户的导航数据和 路由数据 存储在数据库中,用户登录时,请求接口获取当前用户可以访问的路由和菜单,前端拿到数据 动态渲染导航,通过 vue路由 addRoute方法动态添加到路由中
代码实现
本文,将结合vuex带你手把手实现静态角色鉴权思路(后续将会讲解动态角色鉴权)
vuex中定义user模块,存储用户信息以及用户侧边导航数据
// 引入封装好的 登录的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 }) } }) } } }
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 { // 去没有权限这个页面 这是没有权限路由需要自己创建一个 next('/noAuth') } } } else { next('/login') } } else { next() } }
侧边导航页面 使用 getters中的 authMenus 循环侧边导航
<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实现角色鉴权内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7102233008433791012
相关文章
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-10
- 如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下...2021-09-29
- 这篇文章主要分享vuex中mapState思想及应用,在需求开发过程中,有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性,或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的,具体内容,我们一起来看下面文章内容吧...2021-10-09
- 这篇文章主要介绍了解决vuex刷新数据消失问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-12
- 这篇文章主要给大家介绍了关于MongoDB数据库用户角色和权限管理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
SpringBoot集成Spring Security用JWT令牌实现登录和鉴权的方法
这篇文章主要介绍了SpringBoot集成Spring Security用JWT令牌实现登录和鉴权的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-18- 这篇文章主要给大家介绍了Vue.js实战之Vuex的入门教程,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2017-04-03
- 这篇文章主要为大家介绍了Vuex的属性和作用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-12-27
- 这篇文章主要介绍了关于vuex强刷数据丢失问题解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-09
vuex 多模块时 模块内部的mutation和action的调用方式
这篇文章主要介绍了vuex 多模块时 模块内部的mutation和action的调用方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-25vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-01- 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长,为了解决这个问题,Vue 提供 vuex,这篇文章主要给大家介绍了关于vuex项目中登录状态管理的相关资料,需要的朋友可以参考下...2021-09-23
- 在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下...2021-07-13
- 这篇文章主要介绍了Vuex及其使用方法,感兴趣的同学,可以参考下...2021-04-25
- 这篇文章主要介绍了深入理解Vuex的作用,对Vuex感兴趣的同学,可以参考下...2021-05-12
- Pygame是一组跨平台的 Python 模块,专为编写视频游戏而设计,您可以使用 pygame 创建不同类型的游戏,包括街机游戏、平台游戏等等,今天通过本文给大家介绍Pygame移动游戏角色的实现过程,一起看看吧...2021-09-08
- 这篇文章主要介绍PostgreSQL 角色与用户管理相关知识,需要的朋友可以参考下...2020-07-11
- 在vue3.x中vuex调取值在html代码里可以直接使用vue2.x的方法,但是在js里与vue2.x就有了那么一丢丢的不同,下面这篇文章主要给大家介绍了关于Vue3中Vuex详细使用的相关资料,需要的朋友可以参考下...2022-07-08
- 这篇文章主要为大家介绍了vue运用之vuex持久化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-12-23