前后端分离模式下的权限设计方案
点击上方 "程序员小乐"关注, 星标或置顶一起成长
每天凌晨00点00分, 第一时间与你相约
每日英文
Don't make decisions when angry, don't say the promise at happy time.
请记住，别在生气的时候做决定，别在开心的时候说承诺。
每日掏心话
所谓心事，不过是不如己意，那就是我执著于自己描画的理想，一有落差，即生烦恼。
来自：_liuxx | 责编：乐乐
链接：cnblogs.com/liuyh/p/8027833.html
往日回顾：为什么Spring MVC能自动转换json/xml，你研究过它背后的原理吗？
正文
前后端分离模式下，所有的交互场景都变成了数据，传统业务系统中的权限控制方案在前端已经不再适用，因此引发了我对权限的重新思考与设计。
权限控制到底控制的是什么？
在理解权限控制之前，需要明白两个概念：资源和权限。
什么是资源，对于一个系统来说，系统内部的所有信息都可以理解为这个系统的资源。
页面是资源、数据是资源、按钮是资源、图片是资源、甚至页面上一条分割线也可理解为是这个系统的资源。而权限就是访问某个资源所需要的标识。
无论系统的权限如何设计，在用户登录时，都可以计算得出用户所拥有的权限标识集合，也就确定了该用户能访问哪些系统资源，这就是我理解的权限控制的本质。
关于分离：
1、前后端分离开发，六大方案全揭秘：HTTP API 认证授权术
2、SpringBoot2.x炫酷吊炸天前后端分离的后台管理系统实例
3、聊一聊前后端分离接口规范
于是我们可以得出：权限控制是控制登录用户对于系统资源的访问。
前后端分离模式下，前后端在权限控制中各自的职责是什么？
在弄清前后端在权限控制中各自的职责是什么之前，需要理解前后端各自在系统中的职责。这个还是很好理解：
服务端：提供数据接口。
前端：路由控制、页面渲染。
由于前端负责与用户交互，用户所能操作的资源入口都是由前端进行控制，那么前端的权限控制就包括：
前端路由的权限控制，过滤非法请求，用户只能访问权限范围内的页面资源。
页面内组件的权限控制，根据用户的权限控制页面组件的渲染。包括各种按钮、表格、分割线等。
随着前端组件化的快速发展，用户所看到的一切均可理解为组件，页面是个大组件，其内部由各个小组件拼凑而来，那么前端权限控制最终落地到对组件的权限控制。于是脑补了出了最优雅的权限组件使用方式：
<组件 permissionName='xxx' />前端可以渲染出用户权限范围内的各种系统资源，但是不能保证数据接口的安全性，某些比较喜欢折腾的用户完全可以越过前端的页面访问我们系统的数据接口，那么服务端的权限控制最终落地到对接口的权限验证。
实现思路
引上文，系统的一切资源均可进行权限控制，实际上也可以做到，但在我们实际的操作过程中，往往不需要细化到分割线那种程度。这里以按钮级权限控制为例做实现说明，如果有更细粒度的权限需求，此思路依然可行。
前端路由权限控制。用户登录时拿到用户拥有的权限标识集合，在前端存储。路由变化时，进行权限判断，通过则渲染对应页面组件，否则渲染403组件。示例代码：
let hasPermission = permission.check(current.permissionName);
{hasPermission ? children : 封装bird-button权限按钮组件，传入按钮所需权限名，内部进行权限判断，通过则渲染按钮。
测试按钮 服务端。服务端权限验证很好理解。使用拦截器验证当前请求的权限。代码示例：
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;
}
}源码地址
本博客涉及到的前端权限控制思路均已在
完整代码在后台回复：分离，即可获取。
项目中实现，项目中除了按钮级权限方案还提供了后台业务系统开发中常用的数据组件，包括：
下拉选择器：bird-selector。
github.com/liuxx001/bird-front/blob/master/doc/bird-selector.md
全自动数据表格：bird-grid。
github.com/liuxx001/bird-front/blob/master/doc/bird-grid.md
全自动树表：bird-tree-grid。
github.com/liuxx001/bird-front/blob/master/doc/bird-tree-grid.md
数据树：bird-tree。
github.com/liuxx001/bird-front/blob/master/doc/bird-tree.md
全自动表单：bird-form。
github.com/liuxx001/bird-front/blob/master/doc/bird-form.md
权限按钮：bird-button。
github.com/liuxx001/bird-front/blob/master/doc/bird-button.md
所有业务组件的理念均是结合服务端接口进行组件的封装，兼顾灵活性的同时保证更优的业务开发速度。
欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，学习能力的提升上有新的认识，欢迎转发分享给更多人。
欢迎各位读者加入订阅号程序员小乐技术群，在后台回复“加群”或者“学习”即可。
猜你还想看
阿里、腾讯、百度、华为、京东最新面试题汇集
手把手教你 Netty 实现自定义协议！
一个简单的例子带你理解HashMap
JDK 中定时器是如何实现的
关注订阅号「程序员小乐」，收看更多精彩内容
嘿，你在看吗？