Vue3 + TypeScript + Gin 实现后台权限管理平台

最近一直在学习 Vue3 相关的技术栈,包括 CompositionAPI 、TypeScript、vite以及Element UI 对 Vue3 的支持版本 Element Plus。

因此想要使用 Vue3 写一个简单的 RBAC 的用户权限系统。

之前一直是使用 MySQL 这个关系型数据库,正好最近在学习 Kong 网关的时候,接触到了 Postgres 这个关系型数据库,并且还看到了一句话,说是:“MySQL 是目前使用最广泛的数据库,但是 Postgres 是目前最先进的数据库。”

当然这个最先进也是 Postgres 的开源组织自己标榜的。但是对我来说,Postgres 貌似确实要比 MySQL 用起来爽,最起码在数据类型的支持方面,就是一个非常不错的点。

我经常会使用 Json 或者 Array 这种字段,Postgres 就支持的非常不错,当然 MySQL 5.7 以后也是支持 Json 字段的,但是从性能和使用上来说,我还感觉还是 Postgres 用的更好一些,也不排除,是我自己对 MySQL 了解不深入。

好了,废话不多说,我们来实际看看项目吧。

本项目不管是前后端都不会进行过度的封装,该封装的封装,不该封装的就不会进行封装,不会为了装 X 而过度封装代码,减少大家在看代码的时间成本。

演示站点:http://fdevops.com:8088

github:https://github.com/lanyulei/sky , 如果觉得还可以,还请不要吝啬指尖的跳动,轻轻点上一个 star 。

Casbin 权限控制

本系统,使用 Casbin 作为接口的权限管理依赖,使用 RBAC 的方式进行管理,支持用户的多角色绑定。

Casbin 模型文件内容如下:

其实就是 Casbin 官网上给出的 RBAC 模型内容,如果需要使用自定义函数,可参考官网自行添加即可。

https://casbin.org/docs/zh-CN/function

Casbin Gin 中间件的简单封装。

菜单权限

菜单通过对角色可访问的菜单标识进行权限控制,可使多个菜单标识。

路由实例如下:

校验当前用户是否有权限,用户的权限标识列表将存入到 Vuex 中,当前系统给用户定义了超级管理员的概念,因此当遇到程序是超级管理员的话,则直接放行。

项目演示

菜单管理,进行菜单创建、页面元素创建及菜单绑定 API 接口。

Vue3 + TypeScript + Gin 实现后台权限管理平台
菜单管理

为菜单绑定 API 接口方便进行接口权限管理。

Vue3 + TypeScript + Gin 实现后台权限管理平台
菜单绑定 API 接口

页面元素管理,包括但是不限于按钮。

Vue3 + TypeScript + Gin 实现后台权限管理平台
页面元素管理

接口管理,后端所有需要通过 Casbin 进行接口校验的接口。

Vue3 + TypeScript + Gin 实现后台权限管理平台
接口管理

为角色授权

Vue3 + TypeScript + Gin 实现后台权限管理平台
角色授权

截图内容,仅是功能的一部分,详细的内容,可自行访问演示站点查看。

有任何问题,可以到我的博客进行留言讨论,https://www.fdevops.com

本文为原创文章,未经授权禁止转载本站文章。
原文出处:兰玉磊的个人博客
原文链接:https://www.fdevops.com/2021/09/15/30967
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(5条)

  • weich_java
    weich_java 2021年9月16日 17:14

    做的真不错,就是github经常访问不到,能上传gitee就好

    • 兰玉磊
      兰玉磊 2021年9月16日 17:59

      OK

    • weich_java
      weich_java 2021年9月16日 18:24

      学习下,好像缺少 数据库初始化语句,SQL文件中只有insert 没有 create

    • 兰玉磊
      兰玉磊 2021年9月16日 18:39

      使用了 Gorm 的数据结构自动同步功能。

    • weich_java
      weich_java 2021年9月16日 18:40

      赞3Q 好好学下。