React体系前端权限控制方案

在做商家后台管理系统时，作为前端通常会设计到大量的权限控制问题，按照细粒度归归类大致可以分类以下三类

1. 页面权限
2. 模块权限-页面区块（组件）是否显示
3. 元件权限-组件内元素是否显示

以往的处理方式

后端会将用户权限数据同步注入到VM模板中或者前端发送异步请求取到权限数据，数据消费场景一般都散落在代码的角角落落。

 // 伪代码 render(){ return {window.permission?<Component/>:null}
    }

    render(){ return <Component>{this.props.permission?<Button>删除Button>: null}Component> }

用这种方式实现的代码，执行上没有问题，也达到了业务的需求。但是随着代码量的递增，代码变得难以维护，特别是新接手的同学，简直是一场噩梦。

React体系下的实现方式

页面权限、模块权限、元件权限三种前端权限表现形式对应不同的管理策略。

页面权限

对于传统的多页应用，页面权限控制不需要前端关心，后端路由做一层控制。在SPA架构的前端应用中，我们的思路是将所有的前端路由配置在后端，对于不同角色的用户，后端把路由列表吐给前端注册。

模块权限、元件权限

对于这两类权限控制的事就全部需要交给前端处理了，大致思路是将系统中用户散落的权限统一配置，通过HOC包装一下React组件，提供劫持渲染和权限透传的能力。

统一管理权限registerAuthRules

应用的所有权限配置会被统一配置在一个闭包中，权限的值支持后端同步吐出，也支持每次异步获取（利用Promise实现）