Spring Cloud实战: 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

时间:2022-01-14 22:32:23

一. 前言

信我的哈,明天过年。

这应该是农历年前的关于开源项目 Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制的最后一篇文章了。

有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT实现的统一认证鉴权,Spring Cloud & Alibaba + vue-element-admin实现的微服务前后端分离的全栈开源项目。

有来系统 的权限设计主要是为了实现以下几点目标:

  • 实现RBAC模式的权限管理设计

  • 实现基于 vue-element-admin 后台菜单权限管理系统

  • Spring Cloud Gateway 网关针对RESTful接口权限控制

  • Vue 自定义指令实现按钮级别权限控制

二. 项目介绍

1. 项目简介

有来商城 是基于Spring Boot 2.4、Spring Cloud 2020 & Alibaba、Vue、element-ui、uni-app快速构建的一套全栈开源商城平台,包括微服务应用、管理平台、微信小程序及APP应用。

2. 项目地址

管理平台访问地址: http://www.youlai.store

【有来小店】微信小程序体验码,扫描后申请体验即可

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

源码地址:

项目名称 Github 码云
微服务后台 youlai-mall youlai-mall
管理前端 youlai-mall-admin youlai-mall-admin
微信小程序 youlai-mall-weapp youlai-mall-weapp
APP应用 youlai-mall-app youlai-mall-app

3. 项目往期文章

后台微服务

  1. Spring Cloud实战 | 第一篇:Windows搭建Nacos服务
  2. Spring Cloud实战 | 第二篇:Spring Cloud整合Nacos实现注册中心
  3. Spring Cloud实战 | 第三篇:Spring Cloud整合Nacos实现配置中心
  4. Spring Cloud实战 | 第四篇:Spring Cloud整合Gateway实现API网关
  5. Spring Cloud实战 | 第五篇:Spring Cloud整合OpenFeign实现微服务之间的调用
  6. Spring Cloud实战 | 第六篇:Spring Cloud Gateway+Spring Security OAuth2+JWT实现微服务统一认证授权
  7. Spring Cloud实战 | 最七篇:Spring Cloud Gateway+Spring Security OAuth2集成统一认证授权平台下实现注销使JWT失效方案
  8. Spring Cloud实战 | 最八篇:Spring Cloud +Spring Security OAuth2+ Vue前后端分离模式下无感知刷新实现JWT续期
  9. Spring Cloud实战 | 最九篇:Spring Security OAuth2认证服务器统一认证自定义异常处理
  10. Spring Cloud实战 | 第十篇 :Spring Cloud + Nacos整合Seata 1.4.1最新版本实现微服务架构中的分布式事务,进阶之路必须要迈过的槛

后台管理前端

  1. vue-element-admin实战 | 第一篇: 移除mock接入微服务接口,搭建SpringCloud+Vue前后端分离管理平台
  2. vue-element-admin实战 | 第二篇: 最小改动接入后台实现根据权限动态加载菜单

微信小程序

  1. vue+uni-app商城实战 | 第一篇:从0到1快速开发一个商城微信小程序,无缝接入Spring Cloud OAuth2认证授权登录

应用部署

  1. Docker实战 | 第一篇:Linux 安装 Docker
  2. Docker实战 | 第二篇:Docker部署nacos-server:1.4.0
  3. Docker实战 | 第三篇:IDEA集成Docker插件实现一键自动打包部署微服务项目,一劳永逸的技术手段值得一试
  4. Docker实战 | 第四篇:Docker安装Nginx,实现基于vue-element-admin框架构建的项目线上部署
  5. Docker实战 | 第五篇:Docker启用TLS加密解决暴露2375端口引发的安全漏洞,被黑掉三台云主机的教训总结

三. 数据库设计

RBAC(Role-Based Access Control)基于角色访问控制,目前使用最为广泛的权限模型。

此模型有三个角色用户角色权限,在传统的权限模型用户直接关联加了角色层,解耦了用户和权限,使得权限系统有了更清晰的职责划分和更高的灵活度。

以下是有来系统关于RBAC权限模型的数据库

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

重点说权限,系统权限分3类,如下表:

权限名称 表名 字段 权限标识
菜单权限 sys_menu
接口权限 sys_permission type=1 PUT_/users/**
按钮权限 sys_permission type=2 system:user:add

其实了解过目前主流开源系统的权限设计,大概率的把菜单和按钮放一块然后根据类别字段区分,以下就关于这种方式优劣发表下个人意见,仅供大家参考下不必较真:

优势:

  1. 合理,按钮肯定属于某个菜单之下
  2. 省去了权限表(sys_permission)和关联中间表这两张表

劣势:

  1. 菜单模块变的复杂了,菜单表多了和菜单无关联的类型字段和权限标识字段
  2. 菜单和按钮查询要区分类型,给代码开发带来复杂和影响查询性能
  3. 不能同时满足按钮权限控制和网关根据请求路径Ant匹配鉴权(具体下文说)

四. 权限系统管理界面

先看下vue-element-admin下的RBAC模型下的后台权限管理界面,体验地址:http://www.youlai.store

  • 菜单权限管理

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

  • 角色分配权限

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

五. RESTful接口权限控制

1. 理论篇

上文说到的关于权限表的拆分,菜单单独一张表,按钮权限和接口权限合为一张表根据类型type字段区分,之所以这样因为接口和按钮权限有些共性,都有一个权限标识字段。

至于按钮和接口为什么要区分呢?都使用system:user:add权限标识不可以吗?

具体做法是接口方法加上Spring Security的注解@PreAuthorize("hasPermission('system:user:add')"),在执行方法前判断用户时候拥有该权限。

答案是一般场景这样设计绝对没问题。但这里使用网关作为统一鉴权的入口,肯定希望网关一次性把鉴权的活做的干脆利落,这样就不需要在各个微服务单独的把Spring Security权限模块引入鉴权,通过网关鉴权能把职责分工明确,减少开发工作量,无权限的请求直接被网关拦截返回,不会走到微服务那里再被告知无权访问,提高请求效率。

Spring Cloud Gateway网关使用请求路径Ant匹配请求标识进行权限判断的,例如/users/1经过Ant匹配到权限标识/users/**,而/users/**是被用户所持有的权限标识,这就标识用户允许访问/users/1的请求,所以和按钮的权限标识system:user:add是有区别的。

这样就完事了吗?当然还没,因为 有来系统 较于其他系统它是比较严格遵守REST接口设计规范,所以如果仅仅是上面根据请求路径URL判断权限肯定是不合理的,/users/1这个请求路径在RESTful接口下可能是GET类型的请求也有可能是PUT类型的请求,那该如何处理?

所以在sys_permission表里还有一个method字段来标识请求方法类型,值可能会是、GET、POST、PUT、PATCH、DELETE等HTTP请求方法类型,其中是不限请求方法类型的意思,然后将请求方法类型和请求路径组合得到接口的权限标识是这样的PUT_users/1

接下来就通过对 有来系统 的实战操作来演示网关如何细粒度对RESTful接口的权限控制。

2. 实战篇

2.1 添加权限

新增用户管理的增删改查权限

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

2.2 角色授权

赋予系统管理员(admin)用户查询权限,无其他权限

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

2.3 加载角色权限规则至缓存

项目启动查看Redis中的角色权限规则:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

看到系统管理员这个角色是没有用户修改权限的。你可以给角色添加用户修改权限后尝试是否可以修改成功。

2.4 演示

admin系统管理员登录执行一个用户修改的提交的请求,看一下网关鉴权的流程:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

结果可想而知,系统管理员不具有修改用户PUT_/youlai-admin/v1/users/2权限,从缓存查询只有超级管理员具有该接口请求方法访问权限。页面结果显示如下:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

六. 按钮级别权限控制

1. 理论篇

Vue除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。

这里主要使用Vue.directive注册一个全局自定义指令v-has- permission用于权限判断,然后在模板中的任何元素使用v-has- permission属性。

自定义指令学习传送门

2. 实战篇

1. 添加按钮权限

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

2. 角色授权

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

3. 加载角色按钮权限数据

完整代码:youlai-mall-admin

登录成功时获取用户信息,其中包含该用户拥有的权限字符串如下:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

这里将用户权限拥有的字符串集合缓存到vuex的perms属性中:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

4. 自定义和注册全局指令

有来管理前端 是基于vue-element-admin后台前端解决方案,在

vue-element-admin项目我们可以看到自定义指令的应用。如下:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

然后复制一份permission.js重命名为hasPermission.js,修改后如下:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

注册全局指令:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

指令在组件上的应用:

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

5. 演示

系统管理员是没有修改按钮的权限的,结果如下页面不显示修改按钮。

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

那给系统管理员添加修改按钮的权限

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

再看看用户页面的显示情况

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

此时用户页面的修改按钮已经显示出来了,至此完成了系统的按钮权限控制。

七. 结语

本篇通过实战的方式讲述如何基于Spring Cloud Gateway + vue-element-admin技术设计一套符合RBAC规范的权限管理系统,通过网关就可以轻易实现RESTful接口方法细粒度的控制,无需将Spring Security模块引入各个微服务;以及使用Vue的自定义指令在组件中使用实现细粒度的按钮权限控制。

如果你对此系统权限设计有更好的建议,欢迎留言给我,在此感谢!

如果对项目感兴趣的话,欢迎加我微信和项目交流群。

Spring Cloud实战: 基于Spring Cloud Gateway  + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

最后预祝大家新年愉快,新的一年能够“牛”转乾坤。

Spring Cloud实战: 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制的更多相关文章

  1. 实战基于Spring Boot 2的WebFlux和mLab搭建反应式Web

    Spring Framework 5带来了新的Reactive Stack非阻塞式Web框架:Spring WebFlux.作为与Spring MVC并行使用的Web框架,Spring WebFlux ...

  2. vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo

    1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文 ...

  3. Spring Boot实战(3) Spring高级话题

    1. Spring Aware Spring的依赖注入的最大亮点就是你所有的Bean对Spring容器的存在是没有意识的.即你可以将你的容器替换成别的容器. 实际项目中,不可避免地会用到Spring容 ...

  4. Spring Boot实战(1) Spring基础

    1. Spring基础配置 Spring框架本身有四大原则: 1) 使用POJO进行轻量级和最小侵入式开发 2) 通过依赖注入和基于接口编程实现松耦合 3) 通过AOP和默认习惯进行声明式编程 4) ...

  5. Set up HTTP/2 server with Spring Boot 【基于Spring boot搭建http2.0服务器】

    1. Server side With spring boot, we can set up a http server easily. Restcontroller make it easier t ...

  6. Spring Boot实战(2) Spring常用配置

    1. Bean的Scope scope描述Spring容器如何新建Bean的实例.通过注解@Scope实现,取值有: a. Singleton:一个Spring容器中只有一个Bean的实例.此为Spr ...

  7. Spring Cloud实战 | 第十一篇:Spring Cloud Gateway 网关实现对RESTful接口权限控制和按钮权限控制

    一. 前言 hi,大家好,这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT实现的统 ...

  8. 基于 Spring Cloud 完整的微服务架构实战

    本项目是一个基于 Spring Boot.Spring Cloud.Spring Oauth2 和 Spring Cloud Netflix 等框架构建的微服务项目. @作者:Sheldon地址:ht ...

  9. 几种常见的微服务架构方案简述——ZeroC IceGrid、Spring Cloud、基于消息队列

    微服务架构是当前很热门的一个概念,它不是凭空产生的,是技术发展的必然结果.虽然微服务架构没有公认的技术标准和规范草案,但业界已经有一些很有影响力的开源微服务架构平台,架构师可以根据公司的技术实力并结合 ...

随机推荐

  1. peer not authenticated的终极解决方案

    一.前述 使用httpclient发起https请求时,可能会遇到如下异常: javax.net.ssl.SSLPeerUnverifiedException: peer not authentica ...

  2. Unicode和UTF-8的关系

    Unicode和UTF-8都是表示编码,这个我一直都知道,但是这两个实际上是干什么用的,到底是怎么编码的,为什么有了Unicode还要UTF-8,它们之间有什么联系又有什么区别呢?这个问题一直困扰着我 ...

  3. js document.createElement()的用法 (转)

    document.createElement()的用法 分析代码时,发现自己的盲点--document.createElement(),冲浪一番,总结了点经验. document.createElem ...

  4. Alice and Bob(不断补充)

    我之前做过一些博弈的题目,以为博弈都是DP,结果被坑了很多次,其实博弈有很多种,在此,把我见过的类型都搬上来. 1,HDU3951(找规律) 题意:把n枚硬币围成一个圆,让Alice和Bob两个人分别 ...

  5. Linux 下 Lua 与 LuaSQL 模块安装

    相关说明: Lua最近在Nginx的web服务器上挺火的, 它的高效让更多开发喜欢上它, 本文讲述Lua与LuaSQL的安装. 在上几篇mysql-proxy的安装中有提到和操作过. 操作系统: Li ...

  6. javascrip keyCode属性备案

    keycode    8 = BackSpace BackSpacekeycode    9 = Tab Tabkeycode   12 = Clearkeycode   13 = Enterkeyc ...

  7. 在JS中调用JAVA变量

    在JS中调用JAVA变量可以,方法是:var JS变量名 = “<%=JAVA变量名 %>”<%中间写java代码,跟在JSP中一样%>在JAVA中 ,无法调用JS变量

  8. pytorch错误:RuntimeError&colon; received 0 items of ancdata解决

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com RuntimeError: received 0 items of ancdata错误是在datalo ...

  9. js 实现数据结构 -- 队列

    原文: 在 Javascript 中学习数据结构与算法. 概念: 与栈相反,队列是一种遵循先进先出 (FIFO / First In First Out) 原则的一组有序的项:队列在尾部添加新元素,并 ...

  10. 在C&plus;&plus;的函数中如何指定一个数组,使得这个数组的大小由函数的输入值来决定

    今天调试一个C++程序,在一个函数中定义了一个一维数组,设定数组的大小由函数的输入值来决定. 是这样子的: ]; 然后发现:报错! 报错是这样的: 那么问题来了,在C++中定义数组一定要指定数组大小么 ...