前后端分离模式下，所有的交互场景都变成了数据，传统业务系统中的权限控制方案在前端已经不再适用，因此引发了我对权限的重新思考与设计。

权限控制到底控制的是什么？

在理解权限控制之前，需要明白两个概念：资源和权限。什么是资源，对于一个系统来说，系统内部的所有信息都可以理解为这个系统的资源。页面是资源、数据是资源、按钮是资源、图片是资源、甚至页面上一条分割线也可理解为是这个系统的资源。

而权限就是访问某个资源所需要的标识。无论系统的权限如何设计，在用户登录时，都可以计算得出用户所拥有的权限标识集合，也就确定了该用户能访问哪些系统资源，这就是我理解的权限控制的本质。于是我们可以得出：权限控制是控制登录用户对于系统资源的访问。

前后端分离模式下，前后端在权限控制中各自的职责是什么？

在弄清前后端在权限控制中各自的职责是什么之前，需要理解前后端各自在系统中的职责。这个还是很好理解：

服务端：提供数据接口。
前端：路由控制、页面渲染。

由于前端负责与用户交互，用户所能操作的资源入口都是由前端进行控制，那么前端的权限控制就包括：

前端路由的权限控制，过滤非法请求，用户只能访问权限范围内的页面资源。
页面内组件的权限控制，根据用户的权限控制页面组件的渲染。包括各种按钮、表格、分割线等。

随着前端组件化的快速发展，用户所看到的一切均可理解为组件，页面是个大组件，其内部由各个小组件拼凑而来，那么前端权限控制最终落地到对组件的权限控制。于是脑补了出了最优雅的权限组件使用方式：

<组件 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 {@Autowiredprivate TicketHandler ticketHandler;@Autowiredprivate SsoAuthorizeManager authorizeManager;@Overridepublic 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

所有业务组件的理念均是结合服务端接口进行组件的封装，兼顾灵活性的同时保证更优的业务开发速度。

欢迎指正，提出不同的看法。

前后端分离模式下的权限设计方案相关推荐

前后端分离开发下的权限管控：SpringSecurity 框架
首先在了解前后端分离模式下使用SpringSecurity框架之前,我们需要先了解token和jwt(Json Web Token)技术 token 和 session 的区别? 由于http协议是无 ...
【sprintboot+vue】前后端分离模式下的登录验证码验证
[项目背景] 考虑登录时的验证安全,需要添加验证码验证,纯前端实现的验证码其实没有真正意义上做到安全验证的要求,简单一个网页爬虫就能获取到前端生成的验证码,所以应该由后台生成验证码,并由后台完成校验过 ...
前后端分离模式下前端与后端数据交互
下面举的例子就是使用jQuery Ajax和Python Flask进行前后端交互时,前端提交表单数据到后端,后端返回JSON数据给前端. 前端GET提交表单数据: # GET请求var data = ...
Springboot + Spring Security 实现前后端分离登录认证及权限控制
Spring Security简介 Spring Security 是 Spring 家族中的一个安全管理框架,实际上,在 Spring Boot 出现之前,Spring Security 就已经发展 ...
《浅谈架构之路：前后端分离模式》 - 山人行 - 博客园
前言:分离模式对前后端分离研究了一段时间,恰逢公司有一个大项目决定尝试使用前后端分离模式进行,便参与其中.该项目从2016年初立项至今,平平稳稳得度过,但也涌现出越来越多的问题,绝对不是说前后端分离 ...
《浅谈架构之路：前后端分离模式》
前言:分离模式对前后端分离研究了一段时间,恰逢公司有一个大项目决定尝试使用前后端分离模式进行,便参与其中.该项目从2016年初立项至今,平平稳稳得度过,但也涌现出越来越多的问题,绝对不是说前后端分离 ...
vue后端必须接口吗_前后端分离模式，后端说开发完才能给接口文档，合理吗
背景: 汇总了下老王在其他平台的原创回复,欢迎关注老王原创公众号[软件老王],关注不迷路. 一.后端开发完接口才给出接口文档,合理吗? 本人所在的项目组做项目过程中,后端不会先给出接口文档,而是要等他 ...
前后端分离架构下CSRF防御机制
背景 1.什么是CSRF攻击? 这里不再介绍CSRF,已经了解CSRF原理的同学可以直接跳到:"3.前后端分离下有何不同?". 不太了解的同学可以看这两篇对CSRF介绍比较详细的参 ...
前后端分离模式开发的BS电子病历编辑器源码（Java）
电子病历系统,是医学专用系统.医院通过电子病历以电子化方式记录患者就诊的信息,包括:首页.病程记录.检查检验结果.医嘱.手术记录.护理记录等等,其中既有结构化信息,也有非结构化的自由文本,还有图形图象 ...

前后端分离模式下的权限设计方案

权限控制到底控制的是什么？

前后端分离模式下，前后端在权限控制中各自的职责是什么？

实现思路

源码地址

前后端分离模式下的权限设计方案相关推荐

最新文章

热门文章