如何设计一个既能适应React应用又能灵活处理权限变化的权限组件？

本文共计2689个文字，预计阅读时间需要11分钟。

目录+背景+所述的权限控制是什么？+实现思路+路由权限+菜单权限+背景权限管理是后台系统中常见的需求之一。此前基于Vue的后台管理系统权限控制，基本思路是在一些路由上。

目录

• 背景
• 所谓的权限控制是什么？
• 实现思路
• 路由权限
• 菜单权限

背景

权限管理是中后台系统中常见的需求之一。之前做过基于 Vue 的后台管理系统权限控制，基本思路就是在一些路由钩子里做权限比对和拦截处理。

最近维护的一个后台系统需要加入权限管理控制，这次技术栈是React，我刚开始是在网上搜索一些React路由权限控制，但是没找到比较好的方案或思路。

这时想到ant design pro内部实现过权限管理，因此就专门花时间翻阅了一波源码，并在此基础上逐渐完成了这次的权限管理。

整个过程也是遇到了很多问题，本文主要来做一下此次改造工作的总结。

原代码基于 react 16.x、dva 2.4.1 实现，所以本文是参考了ant-design-pro v1内部对权限管理的实现

所谓的权限控制是什么？

一般后台管理系统的权限涉及到两种：

• 资源权限
• 数据权限

资源权限一般指菜单、页面、按钮等的可见权限。

数据权限一般指对于不同用户，同一页面上看到的数据不同。