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

2021年09月15日 阅读数:1
这篇文章主要向大家介绍Vue3 + TypeScript + Gin 实现后台权限管理平台,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

所以想要使用 Vue3 写一个简单的 RBAC 的用户权限系统。git

以前一直是使用 MySQL 这个关系型数据库,正好最近在学习 Kong 网关的时候,接触到了 Postgres 这个关系型数据库,而且还看到了一句话,说是:“MySQL 是目前使用最普遍的数据库,可是 Postgres 是目前最早进的数据库。”github

固然这个最早进也是 Postgres 的开源组织本身标榜的。可是对我来讲,Postgres 貌似确实要比 MySQL 用起来爽,最起码在数据类型的支持方面,就是一个很是不错的点。数据库

我常常会使用 Json 或者 Array 这种字段,Postgres 就支持的很是不错,固然 MySQL 5.7 之后也是支持 Json 字段的,可是从性能和使用上来讲,我还感受仍是 Postgres 用的更好一些,也不排除,是我本身对 MySQL 了解不深刻。后端

好了,废话很少说,咱们来实际看看项目吧。markdown

本项目不论是先后端都不会进行过分的封装,该封装的封装,不应封装的就不会进行封装,不会为了装 X 而过分封装代码,减小你们在看代码的时间成本。ide

演示站点: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 接口。

image.png

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

image.png

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

image.png

接口管理,后端全部须要经过 Casbin 进行接口校验的接口。

image.png

为角色受权。

image.png

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

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