(开源)都进来!简单易懂、功能强大的权限+可视化流程管理系统

1、预览地址:http://139.155.137.144:9012

2、qq群:801913255

一、前言

随着网络的发展,企业对于信息系统数据的保密工作愈发重视,不同身份、角色对于数据的访问权限都应该大相径庭。

列如

1、不同登录人员对一个数据列表的可见度是不一样的,如数据列、数据行、数据按钮等都可能不太一样。

2、表单的灵活设计及呈现。

3、流程的灵活设计及呈现。

4、接口的调用信息者及性能监控。

5、等等。

对于以上等功能,如果要做出一套完整且灵活的权限管理系统,实属不易。

而接下来作者要介绍的"OverallAuth"权限管理系统,可以说是最全面和最好用的权限管理系统。

说明:这篇文章作者会把完成"OverallAuth"系统的技术选型和大致设计思路一一分享给大家。文章较长请大家耐心看完,在文章的最后有项目的预览地址。

二、目录

三、主要技术选择

4、功能介绍及设计简述

4.1 菜单设计

菜单设计非常简单,就是普通的树形结构,但作者依赖于layui vue 强大的功能结构,在此基础上对每个菜单设计了一个重定向和菜单是否启用的开关。

说明:菜单是否启用的存在,可以精准的控制,每个菜单在什么时候开启,什么关闭(配合任务调度)。这样可以针对性调整用户在什么时候拥有什么样的菜单(比如说用于活动页面,在活动结束后,可以立马关闭),大大减低了维护成本。

如图:

4.2 角色管理

角色对于任何一个系统来说都是重中之重,本系统当然也不例外。

"OverallAuth"系统的角色几乎覆盖了所有功能,按钮、菜单、用户、数据行、数据列、流程、表单等。所以在设计方面,我分别建立了以下关系,角色和按钮、角色和菜单、角色和用户、角色和数列等。以便灵活且高效的控制系统中的任何一个功能。

当然角色也不是万能的,对于更加细致化的控制,角色也有过于"拥挤"的时候,所以在"OverallAuth"系统中,作者还加入了一些规则以便更加细致的控制每个模块。

4.3 用户管理

之前也说到,角色和用户存在关系,以便控制用户的菜单权限等,这和一般的权限管理系统基本一致,但本"OverallAuth"系统作为一个灵活且好用的权限管理系统,作者在这上面下了一定功夫,引入了"用户组"等概念。简单来说就是一个用户可以拥有多种角色,角色之间是互补状态。

4.4 按钮样式

在一个系统中,操作按钮是必不可少的,它们的样式也大相径庭,所以作者设计了自定义按钮样式功能,如图:

该功能可以控制系统中任何一个按钮的样式,从而做到实时改变每个按钮样式。

4.5 按钮列表

在拥有自定义按钮样式后,当然要把样式运用到每个按钮之上,所以作者做了一个系统列表,来控制每个功能的按钮样式和按钮事件及按钮名称等,如图:

为了高效的开发,作者对按钮控制写了一套模版,开发者只需要在有使用按钮的地方,加入模版便能够得到相应的按钮。

4.5 菜单权限、按钮权限

菜单权限和按钮权限,又称"功能级权限",这是大多数系统都拥有的功能,它的实现方式也很简单,就是每个菜单、按钮都可以通过角色来设置用户的可操作"单元"。如图:

"功能级权限"对于一般系统来说已经足够,但对于要求较高的系统来说还远远不够。所以作者编写出了一套能高效控制"数据列"、"数据行"的功能级权限管理。

4.6 显示列设置

在说如何控制"数据列"权限前,我想先说说数据列的动态获取,只有掌握了需要显示的数据列,才能有效的控制它。

在webapi中,作者写了一个接口(通过反射),以便获取所有需要显示的数据列。其中包括字段、字段类型、字段描述等信息。并且在此基础上可以编辑改变字段显示的名称、宽度、排序方式、对齐方式、插槽、是否行权限字段等信息。如图

在上述图片中,可以看到有一个"同步属性"的按钮,只要返回字段有变动,便会自动同步其变动信息,使其作用到系统每一个显示的地方,让开发更便捷。

4.7 数据列权限

什么是数据列权限,举一个简单的列子。

人员A和人员B都有一个"员工信息"的列表。其中"员工信息"中有一列为"工资"的数据。为了工资保密,员工A有查看人员工资的权限,员工B没有查看权限,那么就需要数据列权限。

而作者在"OverallAuth"系统中,结合4.6 显示列设置 这一功能,完成了这一功能,且能很灵活的控制每个模块列的显示情况。如图所示:

下面是admin和张三两个用户数据列的对比图

4.8 数据行权限

对于数据行权限,作者使用动态解析的方式,写了一套数据行权限的解析规则(把界面上选择要建立规则的字段,动态解析成程序能识别的代码)。可以灵活的设置数据的显示规则。如图所示

通过上述图片可以看到,设置规则后,同一个用户列表,同一个登录人,只能看到符合规则的数据。

相关推荐
一条晒干的咸魚2 天前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
西凉河的葛三叔3 天前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
xiaohuatu3 天前
CSRF保护--laravel进阶篇
vue3·laravel·csrf
_xaboy4 天前
开源动态表单form-create-designer 扩展个性化配置的最佳实践教程
vue.js·低代码·开源·动态表单·表单·formcreate·低代码表单
arbboter7 天前
libcurl.net入门使用
c#·.net·curl·webapi·libcurl·libcurl.net
arbboter7 天前
RestSharp基本使用方法
开发语言·c#·winform·curl·webapi·restsharp
半度℃温热8 天前
ERROR TypeError: AutoImport is not a function
webpack·vue3·element-plus·插件版本·autoimport
再遇当年8 天前
小米运动健康与华为运动健康在苹手机ios系统中无法识别蓝牙状态 (如何在ios系统中开启 蓝牙 相册 定位 通知 相机等功能权限,保你有用)
ios·蓝牙·智能手表·权限·苹果手机·小米手表·小米运动健康
朝阳398 天前
vue3 中直接使用 JSX ( lang=“tsx“ 的用法)
vue3·tsx·jsx
xcLeigh9 天前
VUE3实现简洁的特色美食网站源码
前端·源码·vue3