renderPageHeader = () => { const { prefixCls, route: { pageTitle }, intl } = this.props; if (isEmpty(pageTitle)) { return null; } const pageTitleStr = intl.formatMessage({ id: pageTitle }); return ( <div className={`${prefixCls}-pageHeader`}> {this.renderBreadcrumb()} <div className={`${prefixCls}-pageTitle`}>{pageTitleStr}</div> </div> ); }
4、面包屑导航
renderBreadcrumb = () => { const { route: { breadcrumb }, intl, prefixCls } = this.props; const breadcrumbData = generateBreadcrumb(breadcrumb); return ( <Breadcrumb className={`${prefixCls}-breadcrumb`}> {map(breadcrumbData, (item, idx) => ( idx === breadcrumbData.length - 1 ? <Breadcrumb.Item key=https://www.jb51.net/{item.href}> {intl.formatMessage({ id: item.text })} </Breadcrumb.Item> : <Breadcrumb.Item key=https://www.jb51.net/{item.href}> <Link href=https://www.jb51.net/{item.href} to=https://www.jb51.net/{item.href}> {intl.formatMessage({ id: item.text })} </Link> </Breadcrumb.Item> ))} </Breadcrumb> ); }
3、设计策略
1、基于角色的访问控制
基于角色的访问控制不直接将系统操作的各种权限赋予具体用户，而是在用户与权限之间建立起角色集合，将权限赋予角色再将角色赋予用户。这样就实现了对于权限和角色的集中管理，避免用户与权限之间直接产生复杂的多对多关系。
2、访问控制列表
具体到角色与权限之间，访问控制列表指代的是某个角色所拥有的系统权限列表。在传统计算机科学中，权限一般指的是对于文件系统进行增删改查的权力。而在 Web 应用中，大部分系统只需要做到页面级别的权限控制即可，简单来说就是根据当前用户的角色来决定其是否拥有查看当前页面的权利。
下面就让我们按照这样的思路实现一个基础版的包含权限管理功能的应用路由。
4、实战代码
1、路由容器
在编写权限管理相关的代码前，我们需要先为所有的页面路由找到一个合适的容器，即 react-router 中的 Switch 组件。与多个独立路由不同的是，包裹在 Switch 中的路由每次只会渲染路径匹配成功的第一个，而不是所有符合路径匹配条件的路由。
<Router> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Router>
<Router> <Switch> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch> </Router>
以上面两段代码为例，如果当前页面路径是 /about 的话，因为 <About /> 、 <User /> 及 <NoMatch /> 这三个路由的路径都符合 /about ，所以它们会同时被渲染在当前页面。而将它们包裹在 Switch 中后， react-router 在找到第一个符合条件的 <About /> 路由后就会停止查找直接渲染 <About /> 组件。
在企业管理系统中因为页面与页面之间一般都是平行且排他的关系，所以利用好 Switch 这个特性对于我们简化页面渲染逻辑有着极大的帮助。
另外值得一提的是，在 react-router 作者 Ryan Florence 的新作@reach/router 中， Switch 的这一特性被默认包含了进去，而且 @reach/router 会自动匹配最符合当前路径的路由。这就使得使用者不必再去担心路由的书写顺序，感兴趣的朋友可以关注一下。
2、权限管理
现在我们的路由已经有了一个大体的框架，下面就让我们为其添加具体的权限判断逻辑。
对于一个应用来说，除去需要鉴权的页面外，一定还存在着不需要鉴权的页面，让我们先将这些页面添加到我们的路由中，如登录页。
<Router> <Switch> <Route path="/login" component={Login}/> </Switch> </Router>
对于需要鉴权的路由，我们需要先抽象出一个判断当前用户是否有权限的函数来作为判断依据，而根据具体的需求，用户可以拥有单个角色或多个角色，抑或更复杂的一个鉴权函数。这里笔者提供一个最基础的版本，即我们将用户的角色以字符串的形式存储在后台，如一个用户的角色是 admin，另一个用户的角色是 user。