若依前端实现权限管理

前言

现在流行的前端框架很多，有若依、eladmin等框架，这些框架都是用于做后台管理的框架，既然是后台管理那么就会涉及到一个比较关键性的问题就是权限管理。

什么是权限管理？

既然是后台管理登录的人的角色可能是超级管理员、管理员、以及普通用户或者有更多的层级角色，这些不同的角色登入后台管理系统左侧导航栏的显示是不同的，实现不同角色登录后台管理系统左侧的导航栏显示不同就是实现权限管理。

很多文章都写的是后端如何实现后台管理系统，以若依框架为例来说说前端是如何实现权限管理的。

思路

将用户的权限字符存入数据库，当用户登录后根据用户的登录信息获取用户的所有信息（包括用户的权限信息）存入Vuex中。

// 获取用户信息
GetInfo({ commit, state }) {return new Promise((resolve, reject) => {getInfo().then(res => {const user = res.userconst avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组commit('SET_ROLES', res.roles)commit('SET_PERMISSIONS', res.permissions)} else {commit('SET_ROLES', ['ROLE_DEFAULT'])}commit('SET_NAME', user.userName)commit('SET_USER', user)commit('SET_AVATAR', avatar)resolve(res)}).catch(error => {reject(error)})})
},

将路由分为公共路由和动态路由（基于用户权限动态去加载）

公共路由

export const constantRoutes = [{path: '/redirect',component: Layout,hidden: true,children: [{path: '/redirect/:path(.*)',component: () =>import ('@/views/redirect')}]},
]

动态路由

export const dynamicRoutes = [{path: '/',component: NavigationBar,hidden: true,permissions: ['system:user:edit'],children: [{path: 'system/user-auth',component:Layout,children: [{path: 'role/:userId(\\d+)',component: () =>import('@/views/system/user/authRole'),name: 'AuthRole',meta: { title: '分配角色', activeMenu: '/system/user' }}]}]},{path: '/',component: NavigationBar,hidden: true,permissions: ['system:role:edit'],children:[{path:'system/role-auth',component:Layout,children: [{path: 'user/:roleId(\\d+)',component: () =>import ('@/views/system/role/authUser'),name: 'AuthUser',meta: { title: '分配用户', activeMenu: '/system/role' }}]}]},{path: '/system/dict-data',component: Layout,hidden: true,permissions: ['system:dict:list'],children: [{path: 'index/:dictId(\\d+)',component: () =>import ('@/views/system/dict/data'),name: 'Data',meta: { title: '字典数据', activeMenu: '/system/dict' }}]},{path: '/monitor/job-log',component: Layout,hidden: true,permissions: ['monitor:job:list'],children: [{path: 'index',component: () =>import ('@/views/monitor/job/log'),name: 'JobLog',meta: { title: '调度日志', activeMenu: '/monitor/job' }}]},{path: '/tool/gen-edit',component: Layout,hidden: true,permissions: ['tool:gen:edit'],children: [{path: 'index/:tableId(\\d+)',component: () =>import ('@/views/tool/gen/editTable'),name: 'GenEdit',meta: { title: '修改生成配置', activeMenu: '/tool/gen' }}]}
]

从上面的代码中我们可以看出公共路由没有permissions字段，动态路由中有permissions字段。

根据用户权限中的permissions字段和Vuex中存储permissions字段判断当前登录的用户拥有哪些权限。

const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
router.addRoutes(asyncRoutes);

// 动态路由遍历，验证是否具备权限
export function filterDynamicRoutes(routes) {const res = []routes.forEach(route => {if (route.permissions) {if (auth.hasPermiOr(route.permissions)) {res.push(route)}} else if (route.roles) {if (auth.hasRoleOr(route.roles)) {res.push(route)}}})return res
}

// 验证用户是否含有指定权限，只需包含其中一个
hasPermiOr(permissions) {return permissions.some(item => {return authPermission(item)})
},

function authPermission(permission) {const all_permission = "*:*:*";const permissions = store.getters && store.getters.permissionsif (permission && permission.length > 0) {return permissions.some(v => {return all_permission === v || v === permission})} else {return false}
}

若依前端实现权限管理相关推荐

yii beforeaction 如何赋值全局变量_前端如何进行用户权限管理
1:问题: 假如在做一个管理系统,面向老师学生的,学生提交申请,老师负责审核(或者还需要添加其他角色,功能权限都不同). 现在的问题是,每种角色登录看到的界面应该都是不一样的,那这个页面的区分如何实现 ...
个人笔记 springboot整合shiro实现权限管理，前端使用vue 10155
转载自github,地址https://github.com/Heeexy/SpringBoot-Shiro-Vue 目录结构: application.yml spring:datasource:u ...
Vuex前端saas人力资源中台管理项目第五天权限管理和图表设计
权限设计-RBAC的权限设计思想首先,我们先了解下什么是传统的权限设计从上面的图中,我们发现,传统的权限设计是对每个人进行单独的权限设置,但这种方式已经不适合目前企业的高效管控权限的发展需求,因为 ...
前端如何实现权限管理板块的流程和思想
一.什么是权限管理权限管理是指一个角色(如vip和非vip)在一个系统中只能使用指定的功能并且只能访问指定的界面,权限管理是一个项目当中必不可少的部分. 二.如何做到权限管理功能注意: 新版 V ...
前端如何进行用户权限管理
这里是修真院前端小课堂,本篇分析的主题是 [前端如何进行用户权限管理] 1:问题: 假如在做一个管理系统,面向老师学生的,学生提交申请,老师负责审核(或者还需要添加其他角色,功能权限都不同). 现在的 ...
一步一步Asp.Net MVC系列_权限管理总结(附MVC权限管理系统源码)
TZHSWEET:请大家多多反馈问题,我已经在修改中了,已更新版本...... 如果大家遇到数据库附加问题,EF连接字符串问题,请自行配置,如果有bug反馈可以私聊,我的qq:409180955. 项 ...
tp5权限管理代码_权限系统控制到按钮级别开源推荐 Spring BootShiroVue
往期精彩推荐: 高逼格开源聊天系统推荐 Spring+Netty+Websocket实现 java人关注这个github开源项目,你会嫌弃手上的笔试面试题资料 2020年一线大厂java笔试面试题分 ...
单点登录与权限管理本质：cookie安全问题
继续介绍「单点登录与权限管理」系列的第一部分:单点登录与权限管理本质,前一篇文章介绍了单点登录概念,以CAS协议的基本流程为例讲解了系统间的交互过程,过程中,cookie的设置和传输涉及的比较多,如何 ...
shiro权限管理_重量级课程发布~企业权限管理平台(SpringBoot2.0+Shiro+Vue)
历经半个多月的时间,Debug亲自撸的 "企业员工角色权限管理平台"终于完成了.正如字面意思,本课程讲解的是一个真正意义上的.企业级的项目实战,主要介绍了企业级应用系统中后端应用权 ...

若依前端实现权限管理

前言

思路

若依前端实现权限管理相关推荐

最新文章

热门文章