开源 PMS 统一权限管理系统

本贴最后更新于 1024 天前,其中的信息可能已经时移俗易

项目地址:https://github.com/fish2018/openpms.git

一、背景

这个项目创建之初是由于我们开发了多个项目,需要对接 SSO 给其他部门使用,但是 SSO 只负责账号认证,并不负责权限分配,比如我们的发布系统,如果随便谁用 SSO 登录后就能发布生产环境应用,这就炸了。。。

这个版本的 PMS 是我从对接 SSO 的版本中解耦出来的,不再使用 SSO 的账号认证,转而使用 PMS 自己的一套账号密码验证,其实这只能是一个临时方案,我的思路是 PMS 要么和 SSO 做成一体化,要么对接 SSO,要么对接 LDAP,所以后面我考虑改成对接 openldap 的通用方案。

二、在线 demo 演示

pms 前端:www.seczh.com
pms 后端:www.seczh.com
账号:admin/admin test/test

对接应用前端:www.devopser.org
对接应用后端:www.devopser.org
账号:test/test

演示菜单的权限控制

admin 登录 PMS 系统,管理用户组权限显示完整菜单

docking08.jpg

test 登录 PMS 系统,访客用户组权限只显示部分菜单

docking09.jpg

演示对 url 和页面元素类型资源的权限控制

test 登录 PMS 系统

docking05.jpg

对按钮添加禁止权限,同时不添加 url 操作权限

docking06.jpg

test 登录对接应用系统

docking04.jpg

docking01.jpg

点击测试,按钮被隐藏掉,并提示对 api 的 url 请求无权限,

docking03.jpg

test 登录 PMS 系统,添加 url 权限

docking07.jpg

test 登录对接应用系统,点击测试得到请求返回值

docking02.jpg

三、PMS 权限管理流程:

1、添加应用:要对接 PMS 的应用,记住 APPID
2、创建该应用的用户组:用于分配成员、菜单和权限。比如管理员组 admin,访客组 guest
3、创建该应用的菜单资源:完整的菜单树,用于后续勾选分配
4、创建该应用的菜单权限:菜单权限有自己的名称,用于后续分配。比如"管理员菜单"显示所有菜单,"访客菜单"只显示部分菜单
5、分配菜单:组管理中分配菜单,选择菜单权限名称。比如给 admin 组分配"管理员菜单",给 guest 组分配"访客菜单"
6、创建该应用的资源:要被约束的资源对象,有 url、页面元素和数据三种类型的资源
7、创建该资源的操作权限:资源操作权限有自己的名称,用于后续分配。针对该资源能够进行的操作。比如对 url 类型资源限制请求方法只能 get 不能 post;页面元素类型资源如按钮禁用或隐藏;数据权限比较难以通用的方案控制,所以这里依据配置的值作为一个 sql 查询的过滤条件进行约束
8、分配资源权限:组管理中分配权限,选择资源操作权限名称。比如给 guest 组分配"隐藏删除按钮"的页面元素类型资源的操作权限。

四、界面操作说明

1、应用管理

1.1 添加需要接入的应用

use01.jpg
use02.jpg

1.2 添加需要约束的应用资源

应用资源列表

04.jpg

1.2.1 资源类型分三种

use06.jpg

  • url 权限:对 url 地址的请求方法进行限制

use07.jpg

  • 页面元素权限:前端根据其判断是否显示或禁用

use08.jpg

  • 数据权限:数据库查询时根据其作为查询条件约束

use09.jpg

这里添加一个 url 类型的资源:
use10.jpg

1.2.2 应用菜单

菜单配置和路由信息保持一致,这里需要有一定的 vue 路由知识

05.jpg

创建菜单

use11.jpg

点击新建节点来添加节点

use12.jpg

设置菜单对应的路由属性
查看前端项目路由信息
use15.jpg
对应 vue 的路由信息填写即可
use13.jpg
use14.jpg

2、权限管理

2.1 资源权限

06.jpg

对于 url 类型资源的操作权限就是约束请求方法

use16.jpg

对于页面元素类型资源的操作权限就是禁止

use17.jpg

2.2 菜单权限

image.png

点击"+"按钮创建菜单权限,勾选菜单并命名,用于后续分配
use19.jpg
use20.jpg

3、组织管理

use21.jpg

点击"+"按钮为指定应用系统创建分组

use22.jpg

给刚才创建的分组分配成员

use23.jpg

给刚才创建的分组分配资源权限

use24.jpg

给刚才创建的分组分配菜单权限

use25.jpg

五、应用对接 PMS 说明(待补充)

对接文档后续补充上来,也可以直接看 git 上 demo 的实现,应用对接一共有三个地方和 pms 有交互:
1、用户在登陆时会请求 pms 拿到一个 token
2、以后每次需要鉴权时应用都会带着这个 token 去请求 pms 鉴权(实现一个装饰器,在需要鉴权的类中使用)
3、退出登录时和 pms 交互清除 token。

一些细节实现相关文章

利用二进制位运算实现权限控制

Tree 组件数据结构相互转换 flat <=> nested

根据用户权限动态生成菜单路由

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    250 引用 • 665 回帖 • 329 关注
  • Flask
    17 引用 • 7 回帖
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    31 引用 • 24 回帖 • 3 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...