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

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

以往的处理方式

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

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

React体系下的实现方式

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

页面权限

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

模块权限、元件权限

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

统一管理权限registerAuthRules

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

权限规则表达式

权限列表中配置的只是颗粒度最细的单个权限。在实际业务需求中，我们常需要根据权限格则组合结果，决定是否显示。比如ComponentA的显示条件是isX1 && isX2 或者 isX1 || isX3。

这里需要引入权限规则表达式的概念。How to compute？

第一步：利用词法分析器解析出表达式中有多少个权限变量。利用esprima可以轻松取到

第二步：计算每个变量对应的权限值

第三部：计算规则表达式，因为权限规则有可能是异步或者的，这里将每个格则包装成Promise对象，利用Promise.all做统一返回，在成功的回调函数中通过New Function的方式计算字符串表达式的结果

如何使用

registerAuthRules

注册权限规则列表，支持同步规则和异步规则

参数:

• rules {Object} 应用权限规则MAP

registerComponentRules

注册组件显示规则，根据组件displayName配置组件所需权限列表

参数:

• rules {Object} 组件权限规则MAP

调用查看

Auth HOC函数

参数:

• options {Object} 组件权限规则MAP
• options.placeholder {Component} 组件隐藏时的占位节点；默认为noscript
• options.initialHide {Boolean} 当存在异步权限规则时，组件是否先默认隐藏；默认值为true
• options.rules {Object} 配置组件需要权限规则集合，作为props属性$auth传递给组件

1. 组件级别权限控制

根据WrappedComponent.displayName判断组件是否有权限

2. 组件内部权限控制（权限属性模式）

代码实现hoc-auth https://github.com/amibug/hoc-auth

本文作者： amibug