权限管理是中后台系统中常见的需求之一。之前做过基于Vue的后台管理系统权限控制[1]，基本思路就是在一些路由钩子里做权限比对和拦截处理。
最近维护的一个后台系统需要加入权限管理控制，这次技术栈是React，我刚开始是在网上搜索一些React路由权限控制，但是没找到比较好的方案或思路。
这时想到antdesignpro内部实现过权限管理，因此就专门花时间翻阅了一波源码，并在此基础上逐渐完成了这次的权限管理。
整个过程也是遇到了很多问题，本文主要来做一下此次改造工作的总结。
原代码基于react16.x、dva2.4.1实现，所以本文是参考了ant-design-prov1[2]内部对权限管理的实现
2所谓的权限控制是什么？一般后台管理系统的权限涉及到两种：
资源权限数据权限资源权限一般指菜单、页面、按钮等的可见权限。
数据权限一般指对于不同用户，同一页面上看到的数据不同。
本文主要是来探讨一下资源权限，也就是前端权限控制。这又分为了两部分：
侧边栏菜单路由权限在很多人的理解中，前端权限控制就是左侧菜单的可见与否，其实这是不对的。举一个例子，假设用户guest没有路由/setting的访问权限，但是他知道/setting的完整路径，直接通过输入路径的方式访问，此时仍然是可以访问的。这显然是不合理的。这部分其实就属于路由层面的权限控制。
3实现思路关于前端权限控制一般有两种方案：
前端固定路由表和权限配置，由后端提供用户权限标识后端提供权限和路由信息结构接口，动态生成权限和菜单我们这里采用的是第一种方案，服务只下发当前用户拥有的角色就可以了，路由表和权限的处理统一在前端处理。
整体实现思路也比较简单：现有权限（currentAuthority）和准入权限（authority）做比较，如果匹配则渲染和准入权限匹配的组件，否则渲染无权限组件（页面）
4路由权限既然是路由相关的权限控制，我们免不了先看一下当前的路由表：
{"name":"活动列表","path":"/activity-mgmt/list","key":"/activity-mgmt/list","exact":true,"authority":["admin"],"