最近始终在学习 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...

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 接口。

为菜单绑定 API 接口不便进行接口权限治理。

页面元素治理，包含然而不限于按钮。

接口治理，后端所有须要通过 Casbin 进行接口校验的接口。

为角色受权。

截图内容，仅是性能的一部分，具体的内容，可自行拜访演示站点查看。

有任何问题，能够到此处进行留言探讨，https://www.fdevops.com 。