在实际项目中，我们可以使用 react-redux 提供的 connect 组件将应用路由 connect 至 redux store，以方便我们直接读取当前用户的角色信息。一旦登录用户的角色发生变化，客户端路由就可以进行相应的判断与响应。
6、组合式开发：权限管理
对于页面级别的权限管理来说，权限管理部分的逻辑是独立于页面的，是与页面中的具体内容无关的。也就是说，权限管理部分的代码并不应该成为页面中的一部分，而是应该在拿到用户权限后创建应用路由时就将没有权限的页面替换为重定向或无权限页面。
这样一来，页面部分的代码就可以实现与权限管理逻辑的彻底解耦，以至于如果抽掉权限管理这一层后，页面就变成了一个无需权限判断的页面依然可以独立运行。而通用部分的权限管理代码也可以在根据业务需求微调后服务于更多的项目。
7、小结
文中我们从权限管理的基础设计思想讲起，实现了一套基于角色的页面级别的应用权限管理系统并分别讨论了无权限重定向及无权限显示无权限页面两种无权限查看时的处理方法。
接下来我们来看一下多级菜单是如何实现的
五、菜单匹配逻辑本节参考代码：
在大部分企业管理系统中，页面的基础布局所采取的一般都是侧边栏菜单加页面内容这样的组织形式。在成熟的组件库支持下，UI 层面想要做出一个漂亮的侧边栏菜单并不困难，但因为在企业管理系统中菜单还承担着页面导航的功能，于是就导致了两大难题，一是多级菜单如何处理，二是菜单项的子页面（如点击门店管理中的某一个门店进入的门店详情页在菜单中并没有对应的菜单项）如何高亮其隶属于的父级菜单。
1、多级菜单
为了增强系统的可扩展性，企业管理系统中的菜单一般都需要提供多级支持，对应的数据结构就是在每一个菜单项中都要有 children 属性来配置下一级菜单项。
const menuData = [{ name: '仪表盘', icon: 'dashboard', path: 'dashboard', children: [{ name: '分析页', path: 'analysis', children: [{ name: '实时数据', path: 'realtime', }, { name: '离线数据', path: 'offline', }], }], }];
递归渲染父菜单及子菜单
想要支持多级菜单，首先要解决的问题就是如何统一不同级别菜单项的交互。
在大多数的情况下，每一个菜单项都代表着一个不同的页面路径，点击后会触发 url 的变化并跳转至相应页面，也就是上面配置中的 path 字段。
但对于一个父菜单来说，点击还意味着打开或关闭相应的子菜单，这就与点击跳转页面发生了冲突。为了简化这个问题，我们先统一菜单的交互为点击父菜单（包含 children 属性的菜单项）为打开或关闭子菜单，点击子菜单（不包含 children 属性的菜单项）为跳转至相应页面。
首先，为了成功地渲染多级菜单，菜单的渲染函数是需要支持递归的，即如果当前菜单项含有 children 属性就将其渲染为父菜单并优先渲染其 children 字段下的子菜单，这在算法上被叫做深度优先遍历。
renderMenu = data => ( map(data, (item) => { if (item.children) { return ( <SubMenu key={item.path} title={ <span> <Icon type={item.icon} /> <span>{item.name}</span> </span> } > {this.renderMenu(item.children)} </SubMenu> ); } return ( <Menu.Item key=https://www.jb51.net/{item.path}> <Link to={item.path} href=https://www.jb51.net/{item.path}> <Icon type={item.icon} /> <span>{item.name}</span> </Link> </Menu.Item> ); }) )