前后端分离权限控制设计和实现思路

点击▲关注 “爪哇笔记”   给公众号标星置顶

更多精彩 第一时间直达

前言

随着移动互联网的发展，前端开发领域也越来越广，前端早已经告别了切图的时代，迎来了规模化，工程化的大前端时代。近几年随着react、angular、vue等前端框架的兴起，前后端分离的架构迅速流行。但同时权限控制也带来了问题。

前后端分离之后，虽然前端也会进行权限控制、但是都比较简单。而且仅仅前端进行权限控制并不是真正意义的权限控制，用户完全可以绕开前端控制直接向后端发起请求。

权限设计

迄今为止最为普及的权限设计模型是RBAC模型，基于角色的访问控制（Role-Based Access Control)

市面上流行的Apache Shrio、Spring Security，都是基于此模型设计的。权限系统可以说是整个系统中最基础，同时也可以很复杂的，在实际项目中，会遇到多个系统，多个用户类型，多个使用场景，这就需要具体问题具体分析，但最核心的RBAC模型是不变的，我们可以在其基础上进行扩展来满足需求。

下面是简单的用户、角色、操作、机构数据库表设计，基本满足了大多数业务场景。

前端控制

用户登录成功会生成一个Token，其中会附带一些基本的用户信息，不建议附带角色权限信息。用户向后端发送请求都会附带这个Token。

前端一般是菜单和按钮控制，在用户登录认证成功之后，根据用户ID实时获取菜单信息并渲染。按钮控制的话，情况比较复杂，如果要求不是很高可以一次性查询出来，放入本地缓存，进行本地鉴权。

这里撸一个比较简单的实现：

hasRole: function(roles){
  var ro