web项目设计文档_web项目前后端分离模式下的权限设计方案
点击蓝色“java版web项目”关注我哟
加个“星标”,优质文章,第一时间送达
上一篇:这300G的Java资料是我师傅当年给我的,免费分享给大家
作者:_liuxx
cnblogs.com/liuyh/p/8027833.html
前后端分离模式下,所有的交互场景都变成了数据,传统业务系统中的权限控制方案在前端已经不再适用,因此引发了我对权限的重新思考与设计。对于非前后端分离模式下的权限思考,看这里:通用数据权限的思考与设计
权限控制到底控制的是什么?
在理解权限控制之前,需要明白两个概念:资源和权限。什么是资源,对于一个系统来说,系统内部的所有信息都可以理解为这个系统的资源。页面是资源、数据是资源、按钮是资源、图片是资源、甚至页面上一条分割线也可理解为是这个系统的资源。
而权限就是访问某个资源所需要的标识。无论系统的权限如何设计,在用户登录时,都可以计算得出用户所拥有的权限标识集合,也就确定了该用户能访问哪些系统资源,这就是我理解的权限控制的本质。于是我们可以得出:权限控制是控制登录用户对于系统资源的访问。
前后端分离模式下,前后端在权限控制中各自的职责是什么?
在弄清前后端在权限控制中各自的职责是什么之前,需要理解前后端各自在系统中的职责。这个还是很好理解:
服务端:提供数据接口。
前端:路由控制、页面渲染。
由于前端负责与用户交互,用户所能操作的资源入口都是由前端进行控制,那么前端的权限控制就包括:
前端路由的权限控制,过滤非法请求,用户只能访问权限范围内的页面资源。
页面内组件的权限控制,根据用户的权限控制页面组件的渲染。包括各种按钮、表格、分割线等。
随着前端组件化的快速发展,用户所看到的一切均可理解为组件,页面是个大组件,其内部由各个小组件拼凑而来,那么前端权限控制最终落地到对组件的权限控制。于是脑补了出了最优雅的权限组件使用方式:
<组件 permissionName='xxx' />
前端可以渲染出用户权限范围内的各种系统资源,但是不能保证数据接口的安全性,某些比较喜欢折腾的用户完全可以越过前端的页面访问我们系统的数据接口,那么服务端的权限控制最终落地到对接口的权限验证。
实现思路
引上文,系统的一切资源均可进行权限控制,实际上也可以做到,但在我们实际的操作过程中,往往不需要细化到分割线那种程度。这里以按钮级权限控制为例做实现说明,如果有更细粒度的权限需求,此思路依然可行。
前端路由权限控制。用户登录时拿到用户拥有的权限标识集合,在前端存储。路由变化时,进行权限判断,通过则渲染对应页面组件,否则渲染403组件。示例代码:
let hasPermission = permission.check(current.permissionName);
<div className={styles.content}> {hasPermission ? children : <Exception type={403}/>}div>
封装bird-button权限按钮组件,传入按钮所需权限名,内部进行权限判断,通过则渲染按钮。
<BirdButton permissionName={'sys'} type='primary'>测试按钮BirdButton>
服务端。服务端权限验证很好理解。使用拦截器验证当前请求的权限。代码示例:
public class SsoAuthorizeInterceptor extends HandlerInterceptorAdapter {
@Autowired private TicketHandler ticketHandler;
@Autowired private SsoAuthorizeManager authorizeManager;
@Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (!(handler instanceof HandlerMethod)) return false;
HandlerMethod handlerMethod = (HandlerMethod) handler; SsoAuthorize authorize = handlerMethod.getMethodAnnotation(SsoAuthorize.class); if (authorize != null) { TicketInfo ticketInfo = ticketHandler.getTicket(request); if (ticketInfo == null) { throw new UnAuthorizedException("用户信息已失效."); }
String[] requirePermissions = authorize.permissions(); if(requirePermissions.length==0)return true;
boolean isCheckAll = authorize.isCheckAll(); UserPermissionChecker permissionChecker = authorizeManager.getUserPermissionChecker(); if(!permissionChecker.hasPermissions(ticketInfo.getUserId(),requirePermissions,isCheckAll)){ throw new ForbiddenException("用户没有当前操作的权限."); } }
return true; }}
源码地址
本博客涉及到的前端权限控制思路均已在:
https://github.com/liuxx001/bird-front
项目中实现,项目中除了按钮级权限方案还提供了后台业务系统开发中常用的数据组件,包括:
下拉选择器:bird-selector。
https://github.com/liuxx001/bird-front/blob/master/doc/bird-selector.md
全自动数据表格:bird-grid。
https://github.com/liuxx001/bird-front/blob/master/doc/bird-grid.md
全自动树表:bird-tree-grid。
https://github.com/liuxx001/bird-front/blob/master/doc/bird-tree-grid.md
数据树:bird-tree。
https://github.com/liuxx001/bird-front/blob/master/doc/bird-tree.md
全自动表单:bird-form。
https://github.com/liuxx001/bird-front/blob/master/doc/bird-form.md
权限按钮:bird-button。
https://github.com/liuxx001/bird-front/blob/master/doc/bird-button.md
所有业务组件的理念均是结合服务端接口进行组件的封装,兼顾灵活性的同时保证更优的业务开发速度。
欢迎指正,提出不同的看法。
说句题外话,有不少人想加老赵的微信,姑且放出来,但是坑位有限哦
猜你喜欢
1、Java 面试题 :百度前 200 页都在这里
2、StringBuilder为什么线程不安全?
3、图文讲解,团队开发中的 Git 最佳实践
4、5 门可能衰落的编程语言
5、再见微服务
6、你一定要知道,关于https的五大误区
7、详解 Tomcat 的连接数与线程池
8、JAVA开发中常用的四种加密方法
强烈推荐一位大佬的公众号
好文章,我在看
web项目设计文档_web项目前后端分离模式下的权限设计方案相关推荐
- 前后端分离模式下的权限设计方案
前后端分离模式下,所有的交互场景都变成了数据,传统业务系统中的权限控制方案在前端已经不再适用,因此引发了我对权限的重新思考与设计. 权限控制到底控制的是什么? 在理解权限控制之前,需要明白两个概念:资 ...
- 前后端分离开发下的权限管控 :SpringSecurity 框架
首先在了解前后端分离模式下使用SpringSecurity框架之前,我们需要先了解token和jwt(Json Web Token)技术 token 和 session 的区别? 由于http协议是无 ...
- 【sprintboot+vue】前后端分离模式下的登录验证码验证
[项目背景] 考虑登录时的验证安全,需要添加验证码验证,纯前端实现的验证码其实没有真正意义上做到安全验证的要求,简单一个网页爬虫就能获取到前端生成的验证码,所以应该由后台生成验证码,并由后台完成校验过 ...
- java基于springboot+vue的在线文档管理系统 nodejs 前后端分离
随着社会的发展,社会的各行各业都在利用信息化时代的优势.计算机的优势和普及使得各种信息系统的开发成为必需. 在线文档管理系统,主要的模块包括查看首页.个人中心.公告信息管理.部门信息管理.岗位管理.员 ...
- 前后端分离模式下前端与后端数据交互
下面举的例子就是使用jQuery Ajax和Python Flask进行前后端交互时,前端提交表单数据到后端,后端返回JSON数据给前端. 前端GET提交表单数据: # GET请求var data = ...
- vue后端必须接口吗_前后端分离模式,后端说开发完才能给接口文档,合理吗
背景: 汇总了下老王在其他平台的原创回复,欢迎关注老王原创公众号[软件老王],关注不迷路. 一.后端开发完接口才给出接口文档,合理吗? 本人所在的项目组做项目过程中,后端不会先给出接口文档,而是要等他 ...
- 用java写ods系统_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.0.0版)...
TableGo是基于数据库的代码自动生成工具,低代码编程技术的实现,可以零代码自动生成SpringBoot项目工程.生成JavaBean.生成前后端分离的CRUD代码.生成MyBaits的Mapper ...
- W3C近期要闻:与Mozilla MDN合作联合开发Web平台文档
作者 | W3C中国 「OpenWeb开发者」依托于BOW(Brillant Open Web)团队,是一个专门的 Web 技术建设小组,致力于推动 Open Web 技术的发展,将不定期为读者同步W ...
- java生成iso9660工具_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.0.0版)...
TableGo_20210212 v7.0.0 正式版发布,此次版本更新如下: 1.新增对DB2数据库的支持 2.新增按字段生成文件,支持把字段.JSON.XML数据转换成任何代码 3.新增大量新的自 ...
- freemarker mysql 生成bean_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(v6.6.6版)...
TableGo_20191026 v6.6.6 正式发布,此次版本更新如下: 1.新增通过自定义模板生成Word文档的功能,可以使用FreeMarker模板生成自定义格式的数据库文档. 2.新增 Sw ...
最新文章
- python 搭建系统监控
- 企业网络推广“卡壳”了?如何更有效提升SEO排名?
- 【回文自动机】bzoj3676 [Apio2014]回文串
- python文字识别算法_Python图像处理之图片文字识别(OCR)
- python软件设置代码字体的大小_PyCharm中代码字体大小调整方法
- 争分夺秒!制药公司如何用大数据加快药物试验进程?
- vSAN Health Service-物理磁盘运行状况-物理磁盘运行状况检索问题(2149291)
- java 线程池的使用_Java 使用线程池执行若干任务
- Java高阶入门N篇
- html音乐静音代码,HTML Audio muted用法及代码示例
- SSM整合(spring mybatis)图书
- Qy词典-免费离线的中英词典
- 入门北京linux嵌入式培训行吗
- hololens 播放video
- 现身说法:37 岁老码农找工作
- HDU - 4747
- max232c语言,串行口通信(STC89C52+MAX232):串行口通信硬件设计详解
- 面向服务的体系架构(SOA)—架构篇
- 解决Macbook在win7系统下不能识别USB设备,完全没反应
- 首都师范 博弈论 3 3 1求解二人零和博弈
热门文章
- 【TSP】基于matlab禁忌搜索算法求解31城市旅行商问题【含Matlab源码 1143期】
- 【通信】基于matlab数字基带传输系统【含Matlab源码 885期】
- 【优化求解】基于matalb改进的遗传算法(GA+IGA)求解城市交通信号优化问题【含Matlab源码 213期】
- ai 实用新型专利_专利制度协调AI创造的创新
- c语言程序不知道头结点输出链表,C语言,不带头结点的链表,利用头插法存入信息,然后输出,没有error,却运行不了,求大神指点...
- linux ext4分区无损扩容,linux操作系统无损升级文件系统ext3至ext4--数据盘篇
- MyEclipse出现红色感叹号解决办法
- CentOS7搭建本地yum源之http服务
- OpenCV学习笔记——图像平滑处理
- Shell脚本之awk详解