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 模型文件内容如下:

[request_definition]
r = sub, obj, act

[policy_definition]
p = sub, obj, act

[role_definition]
g = _, _

[policy_effect]
e = some(where (p.eft == allow))

[matchers]
m = g(r.sub, p.sub) && r.obj == p.obj && r.act == p.act

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

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

Casbin Gin 中间件的简单封装。

package permission

import (
	"sky/pkg/conn"
	"sky/pkg/logger"
	"sky/pkg/tools/response"
	"time"

	"github.com/casbin/casbin/v2"
	gormAdapter "github.com/casbin/gorm-adapter/v3"
	"github.com/gin-gonic/gin"
	"github.com/spf13/viper"
)

var Enforcer *casbin.SyncedEnforcer

func CasbinSetup() *casbin.SyncedEnforcer {
	var (
		err     error
		adapter *gormAdapter.Adapter
	)
	adapter, err = gormAdapter.NewAdapterByDBWithCustomTable(conn.Orm, nil, viper.GetString("casbin.tableName"))
	if err != nil {
		logger.Fatal("创建 casbin gorm adapter 失败,错误:%v", err)
	}

	Enforcer, err = casbin.NewSyncedEnforcer(viper.GetString("casbin.rbacModel"), adapter)
	if err != nil {
		logger.Fatal("创建 casbin enforcer 失败,错误:%v", err)
	}

	err = Enforcer.LoadPolicy()
	if err != nil {
		logger.Fatal("从数据库加载策略失败,错误:%v", err)
	}

	// 定时同步策略
	if viper.GetBool("casbin.isTiming") {
		// 间隔多长时间同步一次权限策略,单位:秒
		Enforcer.StartAutoLoadPolicy(time.Second * time.Duration(viper.GetInt("casbin.intervalTime")))
	}

	return Enforcer
}

func CheckPermMiddleware() gin.HandlerFunc {
	return func(c *gin.Context) {
		//获取资源
		obj := c.Request.URL.Path
		//获取方法
		act := c.Request.Method
		//获取实体
		sub := c.GetString("username")

		isAdmin := c.GetBool("isAdmin")
		if isAdmin {
			c.Next()
		} else {
			//判断策略中是否存在
			if ok, _ := Enforcer.Enforce(sub, obj, act); ok {
				c.Next()
			} else {
				response.Error(c, nil, response.NoPermissionError)
				c.Abort()
			}
		}
	}
}

菜单权限

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

路由实例如下:

{
	path: '/user',
	name: 'User',
	component: () => import('/@/views/user/list.vue'),
	meta: {
		title: '用户列表',
		auth: ['system:user:list'] // 此为路由标识,只有角色关联了此标识,才可访问。
	},
}

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

export function setFilterRoute(chil: any) {
	let filterRoute: any = [];
	chil.forEach((route: any) => {
		if (route.meta.auth) {
			route.meta.auth.forEach((metaAuth: any) => {
				store.state.userInfos.userInfos.authPageList.forEach((auth: any) => {
					// 如果是超级管理员,则直接通过
					if (store.state.userInfos.userInfos.is_admin || metaAuth === auth) filterRoute.push({ ...route });
				});
			});
		}
	});
	return filterRoute;
}

项目演示

菜单管理,进行菜单创建、页面元素创建及菜单绑定 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 国际」知识共享许可协议进行许可。

(25)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2021年8月25日 00:23
下一篇 2022年2月14日 10:50

相关推荐

发表评论

您的电子邮箱地址不会被公开。

评论列表(10条)

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

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

  • seed
    seed 2021年9月26日 22:09

    python 转 go,github上的中后台项目封装了太多乱七八糟的东西, 这个就很适合初学者,感谢庆祝

  • weich_java
    weich_java 2021年11月4日 14:27

    你好,不好意思又打扰你,我在一个小项目中用到了你的sky-ui,现在发现一个问题就是我在 vite build之后的文件部署nginx后,浏览器访问的时候提示又语法错误。您能指点一下吗?SyntaxError: 9
    at mx (vendor.d363748e.js:69)
    at f (vendor.d363748e.js:70)
    at Ce (vendor.d363748e.js:70)
    at Pe (vendor.d363748e.js:70)
    at Object.ze [as nextToken] (vendor.d363748e.js:70)
    at d (vendor.d363748e.js:70)
    at h (vendor.d363748e.js:70)
    at p (vendor.d363748e.js:70)
    at Object.g [as parse] (vendor.d363748e.js:70)
    at iVe (vendor.d363748e.js:71)

  • xxy
    xxy 2022年1月1日 15:40

    做的好好,我是python转go,同时也需要学习vue,感谢大佬的项目

  • xxy
    xxy 2022年1月1日 15:45

    如果能把这个项目的实战过程放到B站就更好了,对我个新人更友好点XD