vue基于d2-admin的RBAC权限管理解决方案
前两篇关于vue权限路由文章的填坑,说了一堆理论,是时候操作一波了。
选择d2-admin是因为element-ui的相关开源项目里,d2-admin的结构和代码是让我感到最舒服的,而且基于d2-admin实现RBAC权限管理也很方便,对d2-admin没有大的侵入性的改动。
相关概念
不了解RBAC,可以看这里企业管理系统前后端分离架构设计 系列一 权限模型篇
- 实现了RBAC模型权限控制
- 菜单与路由独立管理,完全由后端返回
- user存储用户
- admin标识用户是否为系统管理员
- role存储角色信息
- roleUser存储用户与角色的关联关系
- menu存储菜单信息,类型分为
菜单
与功能
,一个菜单下可以有多个功能,菜单
类型的permission
字段标识访问这个菜单需要的功能权限,功能
类型的permission
字段相当于此功能的别称,所以菜单
类型的permission
字段为其某个功能
类型子节点的permission
值 - permission存储角色与功能的关联关系
- interface存储接口信息
- functionInterface存储功能与接口关联关系,通过查找用户所属角色,再查找相关角色所具备的功能权限,再通过相关功能就可以查出用户所能访问的接口
- route存储前端路由信息,通过
permission
字段过滤出用户所能访问的路由
运行流程及相关API
使用d2admin
的原有登录逻辑,全局路由守卫中判断是否已经拉取权限信息,获取后标识为已获取。
const token = util.cookies.get('token')
if (token && token !== 'undefined') {
//拉取权限信息
if (!isFetchPermissionInfo) {
await fetchPermissionInfo();
isFetchPermissionInfo = true;
next(to.path, true)
} else {
next()
}
} else {
// 将当前预计打开的页面完整地址临时存储 登录后继续跳转
// 这个 cookie(redirect) 会在登录后自动删除
util.cookies.set('redirect', to.fullPath)
// 没有登录的时候跳转到登录界面
next({
name: 'login'
})
}
//标记是否已经拉取权限信息
let isFetchPermissionInfo = false
let fetchPermissionInfo = async () => {
//处理动态添加的路由
const formatRoutes = function (routes) {
routes.forEach(route => {
route.component = routerMapComponents[route.component]
if (route.children) {
formatRoutes(route.children)
}
})
}
try {
let userPermissionInfo = await userService.getUserPermissionInfo()
permissionMenu = userPermissionInfo.accessMenus
permissionRouter = userPermissionInfo.accessRoutes
permission.functions = userPermissionInfo.userPermissions
permission.roles = userPermissionInfo.userRoles
permission.interfaces = util.formatInterfaces(userPermissionInfo.accessInterfaces)
permission.isAdmin = userPermissionInfo.isAdmin == 1
} catch (ex) {
console.log(ex)
}
formatRoutes(permissionRouter)
let allMenuAside = [...menuAside, ...permissionMenu]
let allMenuHeader = [...menuHeader, ...permissionMenu]
//动态添加路由
router.addRoutes(permissionRouter);
// 处理路由 得到每一级的路由设置
store.commit('d2admin/page/init', [...frameInRoutes, ...permissionRouter])
// 设置顶栏菜单
store.commit('d2admin/menu/headerSet', allMenuHeader)
// 设置侧边栏菜单
store.commit('d2admin/menu/fullAsideSet', allMenuAside)
// 初始化菜单搜索功能
store.commit('d2admin/search/init', allMenuHeader)
// 设置权限信息
store.commit('d2admin/permission/set', permission)
// 加载上次退出时的多页列表
store.dispatch('d2admin/page/openedLoad')
await Promise.resolve()
}
后端需要返回的权限信息包括权限过滤后的角色编码集合,功能编码集合,接口信息集合,菜单列表,路由列表,以及是否系统管理员标识。格式如下
{
"statusCode": 200,
"msg": "",
"data": {
"userName": "MenuManager",
"userRoles": [
"R_MENUADMIN"
],
"userPermissions": [
"p_menu_view",
"p_menu_edit",
"p_menu_menu"
],
"accessMenus": [
{
"title": "系统",
"path": "/system",
"icon": "cogs",
"children": [
{
"title": "系统设置",
"icon": "cogs",
"children": [
{
"title": "菜单管理",
"path": "/system/menu",
"icon": "th-list"
}
]
},
{
"title": "组织架构",
"icon": "pie-chart",
"children": [
{
"title": "部门管理",
"icon": "html5"
},
{
"title": "职位管理",
"icon": "opencart"
}
]
}
]
}
],
"accessRoutes": [
{
"name": "System",
"path": "/system",
"component": "layoutHeaderAside",
"componentPath": "layout/header-aside/layout",
"meta": {
"title": "系统设置",
"cache": true
},
"children": [
{
"name": "MenuPage",
"path": "/system/menu",
"component": "menu",
"componentPath": "pages/sys/menu/index",
"meta": {
"title": "菜单管理",
"cache": true
}
},
{
"name": "RoutePage",
"path": "/system/route",
"component": "route",
"componentPath": "pages/sys/route/index",
"meta": {
"title": "路由管理",
"cache": true
}
},
{
"name": "RolePage",
"path": "/system/role",
"component": "role",
"componentPath": "pages/sys/role/index",
"meta": {
"title": "角色管理",
"cache": true
}
},
{
"name": "UserPage",
"path": "/system/user",
"component": "user",
"componentPath": "pages/sys/user/index",
"meta": {
"title": "用户管理",
"cache": true
}
},
{
"name": "InterfacePage",
"path": "/system/interface",
"component": "interface",
"meta": {
"title": "接口管理"
}
}
]
}
],
"accessInterfaces": [
{
"path": "/menu/:id",
"method": "get"
},
{
"path": "/menu",
"method": "get"
},
{
"path": "/menu/save",
"method": "post"
},
{
"path": "/interface/paged",
"method": "get"
}
],
"isAdmin": 0,
"avatarUrl": "https://api.adorable.io/avatars/85/abott@adorable.png"
}
}
设置菜单
将固定菜单(/menu/header
、/menu/aside
)与后端返回的权限菜单(accessMenus
)合并后,存入相应的vuex store模块中
...
let allMenuAside = [...menuAside, ...permissionMenu]
let allMenuHeader = [...menuHeader, ...permissionMenu]
...
// 设置顶栏菜单
store.commit('d2admin/menu/headerSet', allMenuHeader)
// 设置侧边栏菜单
store.commit('d2admin/menu/fullAsideSet', allMenuAside)
// 初始化菜单搜索功能
store.commit('d2admin/search/init', allMenuHeader)
处理路由
默认使用routerMapComponents
的方式处理后端返回的权限路由
//处理动态添加的路由
const formatRoutes = function (routes) {
routes.forEach(route => {
route.component = routerMapComponents[route.component]
if (route.children) {
formatRoutes(route.children)
}
})
}
...
formatRoutes(permissionRouter)
//动态添加路由
router.addRoutes(permissionRouter);
// 处理路由 得到每一级的路由设置
store.commit('d2admin/page/init', [...frameInRoutes, ...permissionRouter])
路由处理方式及区别可看vue权限路由实现方式总结二
设置权限信息
将角色编码集合,功能编码集合,接口信息集合,以及是否系统管理员标识存入相应的vuex store模块中
...
permission.functions = userPermissionInfo.userPermissions
permission.roles = userPermissionInfo.userRoles
permission.interfaces = util.formatInterfaces(userPermissionInfo.accessInterfaces)
permission.isAdmin = userPermissionInfo.isAdmin == 1
...
// 设置权限信息
store.commit('d2admin/permission/set', permission)
接口权限控制以及loading配置
支持使用角色编码,功能编码以及接口权限进行控制,如下
export function getMenuList() {
return request({
url: '/menu',
method: 'get',
interfaceCheck: true,
permission:["p_menu_view"],
loading: {
type: 'loading',
options: {
fullscreen: true,
lock: true,
text: '加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.8)'
}
},
success: {
type: 'message',
options: {
message: '加载菜单成功',
type: 'success'
}
}
})
}
interfaceCheck: true
表示使用接口权限进行控制,如果vuex store中存储的接口信息与当前要请求的接口想匹配,则可发起请求,否则请求将被拦截。
permission:["p_menu_view"]
表示使用角色编码和功能编码进行权限校验,如果vuex store中存储的角色编码或功能编码与当前表示的编码相匹配,则可发起请求,否则请求将被拦截。
源码位置在libs/permission.js
,可根据自己需求进行修改
loading
配置相关源码在libs/loading.js
,根据自己需求进行配置,success
也是如此,源码在libs/loading.js
。 照此思路可以自行配置其它功能,比如请求失败等。
页面元素权限控制
使用指令v-permission
:
<el-button
v-permission:function.all="['p_menu_edit']"
type="primary"
icon="el-icon-edit"
size="mini"
@click="batchEdit"
>批量编辑</el-button>
参数可为function
、role
,表明以功能编码或角色编码进行校验,为空则使用两者进行校验。
修饰符all
,表示必须全部匹配指令值中所有的编码。
源码位置在plugin/permission/index.js
,根据自己实际需求进行修改。
使用v-if
+全局方法:
<el-button
v-if="canAdd"
type="primary"
icon="el-icon-circle-plus-outline"
size="mini"
@click="add"
>添加</el-button>
data() {
return {
canAdd: this.hasPermissions(["p_menu_edit"])
};
},
默认同时使用角色编码与功能编码进行校验,有一项匹配即可。
类似的方法还要hasFunctions
,hasRoles
。
源码位置在plugin/permission/index.js
,根据自己实际需求进行修改。
不要使用
v-if="hasPermissions(['p_menu_edit'])"
这种方式,会导致方法多次执行
也可以直接在组件中从vuex store读取权限信息进行校验。
开发建议
页面级别的组件放到
pages/
目录下,并且在routerMapCompnonents/index.js
中以key-value的形式导出不需要权限控制的固定菜单放到
menu/aside.js
和menu/header.js
中不需要权限控制的路由放到
router/routes.js
frameIn
内需要权限控制的菜单与路由通过界面的管理功能进行添加,确保菜单的
path
与路由的path
相对应,路由的name
与页面组件的name
一致才能使keep-alive
生效,路由的component
在routerMapCompnonents/index.js
中能通过key匹配到。开发阶段菜单与路由的添加可由开发人员自行维护,并维护一份清单,上线后将清单交给相关的人去维护即可。
如果觉得麻烦,不想菜单与路由由后端返回,可以在前端维护一份菜单和路由(路由中的
component
还是使用字符串,参考mock/permissionMenuAndRouter.js
),并且在菜单和路由上面维护相应的权限编码,一般都是使用功能编码。后端就不需要返回菜单和路由信息了,但是其他权限信息,比如角色编码,功能编码等还是需要的。通过后端返回的功能编码列表,在前端过滤出用户具备权限的菜单和路由,过滤处理后后的菜单与路由格式与之前由后端返回的格式一致,然后将处理后的菜单与路由当做后端返回的一样处理即可。
数据mock与代码生成
数据mock使用lazy-mock修改而来的d2-admin-server,数据真实来源于后端,相比其他工具,支持数据持久化,存储使用的是json文件,不需要安装数据库。简单的配置即可自动生成增删改查的接口。
后端使用中间件控制访问权限,比如:
.get('/menu', PermissionCheck(), controllers.menu.getMenuList)
PermissionCheck
默认使用接口进行校验,校验用户所能访问的API中是否匹配当前API,支持使用功能编码与角色编码进行校验PermissionCheck(["p_menu_edit"],["r_menu_admin"],true)
,第一个参数为功能编码,第二个为角色编码,第三个为是否使用接口进行校验。
更多详细用法可看lazy-mock文档
前端代码生成还在开发中...
vue基于d2-admin的RBAC权限管理解决方案的更多相关文章
- ThinkPHP中RBAC权限管理的简单应用
RBAC英文全称(Role-Based Access Controller)即基于角色的权限访问控制,简单来讲,一个用户可以拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色-权限”的授 ...
- 基于RBAC权限管理的后台管理系统
在摸爬滚打中渐渐理解了RBAC权限管理是个什么玩意. RBAC的基本概念: **RBAC认为权限授权实际上是Who.What.How的问题.在RBAC模型中,who.what.how构成了访问权限三元 ...
- [转]Asp.Net大型项目实践(11)-基于MVC Action粒度的权限管理【续】【源码在这里】(在线demo,全部源码)
本文转自:http://www.cnblogs.com/legendxian/archive/2010/01/25/1655551.html 接上篇Asp.Net大型项目实践(10)-基于MVC Ac ...
- Spring Security实现RBAC权限管理
Spring Security实现RBAC权限管理 一.简介 在企业应用中,认证和授权是非常重要的一部分内容,业界最出名的两个框架就是大名鼎鼎的 Shiro和Spring Security.由于Spr ...
- PHP中RBAC权限管理
1.RBAC概念和原理 RBAC:全称叫做Role-Based Access Control,中文翻译叫做基于角色的访问控制.其主要的作用是实现项目的权限控制. ...
- spring boot:spring security用mysql数据库实现RBAC权限管理(spring boot 2.3.1)
一,用数据库实现权限管理要注意哪些环节? 1,需要生成spring security中user类的派生类,用来保存用户id和昵称等信息, 避免页面上显示用户昵称时需要查数据库 2,如果需要在页面上显示 ...
- RBAC权限管理模型 产品经理 设计
RBAC权限管理模型:基本模型及角色模型解析及举例 | 人人都是产品经理http://www.woshipm.com/pd/440765.html RBAC权限管理 - PainsOnline的专栏 ...
- yii2 rbac权限管理学习笔记
下面介绍一个 yii2 的 Rbac 权限管理设置,闲话少说,直接上代码, 1.首先我们要在组件里面配置一下 Rbac ,如下所示(common/config/main-local.php或者main ...
- 基于K2 BPM的航空业核心业务管理解决方案
基于K2 BPM平台的航空业解决方案,专注航空公司运行类.营销类.管理类所有解决方案. 查看完整版,请访问K2官网http://www.k2software.cn/zh-hans/aviation-i ...
随机推荐
- ASP.NET MVC+Redis (准备工作)
今天准备更新这个项目的第二篇博客.有一点需要说明的是之前觉得用的是Asp.net的WebPage,经过查看微软的官方文档还有相关的博客,相比较而言使用起来需要安装一个自动工具WebMatrix可以很快 ...
- .net core AOP之Filter
当我们进行项目开发时,往往在开发过程中需要临时加入一些常用功能性代码,如身份验证.日志记录.异常获取等功能.如果每个方法中都加入这些功能性代码的话,无疑使项目显得过于臃肿,代码繁杂.这时候就要加入过滤 ...
- 如何使用socket进行java网络编程(四)
在上一篇的结尾,提到过用来处理每一个服务端accept到的socket,我们由原来最开始的单线程改成了多线程去处理,但是对每一个接收到的socket都new一个thread去处理,这样效率太低,我们需 ...
- Pacemaker 介绍
1. 简介 Pacemaker是一个集群资源管理者.他用资源级别的监测和恢复来保证集群服务(aka.资源)的最大可用性.它可以用你所擅长的基础组件(Corosync或者是Heartbeat)来实现通信 ...
- win10无法访问samba共享
地址: https://blog.csdn.net/xiaohuixing16134/article/details/79601064?utm_source=blogxgwz1 问题描述:配置好sam ...
- java验证身份证合理性
package com.tiantian.util; import java.util.Calendar;import java.util.HashMap;import java.util.Map;i ...
- linux查看防火墙状态及开启关闭命令
存在以下两种方式: 一.service方式 查看防火墙状态: [root@centos6 ~]# service iptables status iptables:未运行防火墙. 开启防火墙: [ro ...
- Junit的常见注解
@Beforeclass:表示使用此注解的方法在测试类被调用之前执行,在一个测试类中只能声明此注解一次,此注解的方法只被执行一次 @AfterClass :表示使用此注解的方法在测试类被调用结束退出之 ...
- Java之集合(十一)IdentityHashMap
转载请注明源出处:http://www.cnblogs.com/lighten/p/7381905.html 1.前言 查看JDK源码总是能发现一些新东西,IdentityHashMap也是Map的一 ...
- EF基础知识小记五(一对多、多对多处理)
本文主要讲EF一对多关系和多对多关系的建立 一.模型设计器 1.一对多关系 右键设计器新增关联 导航属性和外键属性可修改 2.多对多关系 右键设计器新增关联 模型设计完毕之后,根据右键设计器根据模型生 ...