React中的权限组件设计问题小结

目录

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

背景

权限管理是中后台系统中常见的需求之一。之前做过基于 Vue 的后台管理系统权限控制，基本思路就是在一些路由钩子里做权限比对和拦截处理。
最近维护的一个后台系统需要加入权限管理控制，这次技术栈是React，我刚开始是在网上搜索一些React路由权限控制，但是没找到比较好的方案或思路。
这时想到ant design pro内部实现过权限管理，因此就专门花时间翻阅了一波源码，并在此基础上逐渐完成了这次的权限管理。
整个过程也是遇到了很多问题，本文主要来做一下此次改造工作的总结。

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

所谓的权限控制是什么？

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

资源权限数据权限

资源权限一般指菜单、页面、按钮等的可见权限。
数据权限一般指对于不同用户，同一页面上看到的数据不同。
本文主要是来探讨一下资源权限，也就是前端权限控制。这又分为了两部分：

侧边栏菜单路由权限

在很多人的理解中，前端权限控制就是左侧菜单的可见与否，其实这是不对的。举一个例子，假设用户guest没有路由/setting的访问权限，但是他知道/setting的完整路径，直接通过输入路径的方式访问，此时依旧是可以访问的。这显然是不合理的。这部分其实就属于路由层面的权限控制。

实现思路

关于前端权限控制一般有两种方案：

前端固定路由表和权限配置，由后端提供用户权限标识后端提供权限和路由信息结构接口，动态生成权限和菜单

我们这里采用的是第一种方案，服务只下发当前用户拥有的角色就可以了，路由表和权限的处理统一在前端处理。
整体实现思路也比较简单：现有权限（currentAuthority）和准入权限（authority）做比较，如果匹配则渲染和准入权限匹配的组件，否则渲染无权限组件（403 页面）

路由权限

既然是路由相关的权限控制，我们免不了先看一下当前的路由表：

1. {
2.     "name": "活动列表",
3.     "path": "/activity-mgmt/list",
4.     "key": "/activity-mgmt/list",
5.     "exact": true,
6.     "authority": [
7.         "admin"
8.     ],
9.     "component":  LoadableComponent(props),
10.     "inherited": false,
11.     "hideInBreadcrumb": false
12. },
13. {
14.     "name": "优惠券管理",
15.     "path": "/coupon-mgmt/coupon-rule-bplist",
16.     "key": "/coupon-mgmt/coupon-rule-bplist",
17.     "exact": true,
18.     "authority": [
19.         "admin",
20.         "coupon"
21.     ],
22.     "component":  LoadableComponent(props),
23.     "inherited": true,
24.     "hideInBreadcrumb": false
25. },
26. {
27.     "name": "营销录入系统",
28.     "path": "/marketRule-manage",
29.     "key": "/marketRule-manage",
30.     "exact": true,
31.     "component":  LoadableComponent(props),
32.     "inherited": true,
33.     "hideInBreadcrumb": false
34. }

复制代码

这份路由表其实是我从控制台 copy 过来的，内部做了很多的转换处理，但最终生成的就是上面这个对象。

这里每一级菜单都加了一个authority字段来标识允许访问的角色。component代表路由对应的组件：

1. import React, { createElement } from "react"
2. import Loadable from "react-loadable"
4. "/activity-mgmt/list": {
5.     component: dynamicWrapper(app, ["activityMgmt"], () => import("../routes/activity-mgmt/list"))
6. },
7. // 动态引用组件并注册model
8. const dynamicWrapper = (app, models, component) => {
9.   // register models
10.   models.forEach(model => {
11.     if (modelNotExisted(app, model)) {
12.       // eslint-disable-next-line
13.       app.model(require(`../models/${model}`).default)
14.     }
15.   })
17.   // () => require('module')
18.   // transformed by babel-plugin-dynamic-import-node-sync
19.   // 需要将routerData塞到props中
20.   if (component.toString().indexOf(".then(") < 0) {
21.     return props => {
22.       return createElement(component().default, {
23.         ...props,
24.         routerData: getRouterDataCache(app)
25.       })
26.     }
27.   }
28.   // () => import('module')
29.   return Loadable({
30.     loader: () => {
31.       return component().then(raw => {
32.         const Component = raw.default || raw
33.         return props =>
34.           createElement(Component, {
35.             ...props,
36.             routerData: getRouterDataCache(app)
37.           })
38.       })
39.     },
40.     // 全局loading
41.     loading: () => {
42.       return (
43.         <div
44.           style={{
45.             display: "flex",
46.             justifyContent: "center",
47.             alignItems: "center"
48.           }}
49.         >
50.           <Spin size="large" className="global-spin" />
51.         </div>
52.       )
53.     }
54.   })
55. }
56. 复制代码

复制代码

有了路由表这份基础数据，下面就让我们来看下如何通过一步步的改造给原有系统注入权限。
先从src/router.js这个入口开始着手：

1. // 原src/router.js
2. import dynamic from "dva/dynamic"
3. import { Redirect, Route, routerRedux, Switch } from "dva/router"
4. import PropTypes from "prop-types"
5. import React from "react"
6. import NoMatch from "./components/no-match"
7. import App from "./routes/app"
9. const { ConnectedRouter } = routerRedux
11. const RouterConfig = ({ history, app }) => {
12.   const routes = [
13.     {
14.       path: "activity-management",
15.       models: () => [import("@/models/activityManagement")],
16.       component: () => import("./routes/activity-mgmt")
17.     },
18.     {
19.       path: "coupon-management",
20.       models: () => [import("@/models/couponManagement")],
21.       component: () => import("./routes/coupon-mgmt")
22.     },
23.     {
24.       path: "order-management",
25.       models: () => [import("@/models/orderManagement")],
26.       component: () => import("./routes/order-maint")
27.     },
28.     {
29.       path: "merchant-management",
30.       models: () => [import("@/models/merchantManagement")],
31.       component: () => import("./routes/merchant-mgmt")
32.     }
33.     // ...
34.   ]
36.   return (
37.     <ConnectedRouter history={history}>
38.       <App>
39.         <Switch>
40.           {routes.map(({ path, ...dynamics }, key) => (
41.             <Route
42.               key={key}
43.               path={`/${path}`}
44.               component={dynamic({
45.                 app,
46.                 ...dynamics
47.               })}
48.             />
49.           ))}
50.           <Route component={NoMatch} />
51.         </Switch>
52.       </App>
53.     </ConnectedRouter>
54.   )
55. }
57. RouterConfig.propTypes = {
58.   history: PropTypes.object,
59.   app: PropTypes.object
60. }
62. export default RouterConfig

复制代码

这是一个非常常规的路由配置，既然要加入权限，比较合适的方式就是包一个高阶组件AuthorizedRoute。然后router.js就可以更替为：

1. function RouterConfig({ history, app }) {
2.   const routerData = getRouterData(app)
3.   const BasicLayout = routerData["/"].component
4.   return (
5.     <ConnectedRouter history={history}>
6.       <Switch>
7.         <AuthorizedRoute path="/" render={props => <BasicLayout {...props} />} />
8.       </Switch>
9.     </ConnectedRouter>
10.   )
11. }

复制代码

来看下AuthorizedRoute的大致实现：

1. const AuthorizedRoute = ({
2.   component: Component,
3.   authority,
4.   redirectPath,
5.   {...rest}
6. }) => {
7.   if (authority === currentAuthority) {
8.     return (
9.       <Route
10.       {...rest}
11.       render={props => <Component {...props} />} />
12.     )
13.   } else {
14.     return (
15.       <Route {...rest} render={() =>
16.         <Redirect to={redirectPath} />
17.       } />
18.     )
19.   }
20. }

复制代码

我们看一下这个组件有什么问题：页面可能允许多个角色访问，用户拥有的角色也可能是多个（可能是字符串，也可呢是数组）。
直接在组件中判断显然不太合适，我们把这部分逻辑抽离出来：

1. /**
2. * 通用权限检查方法
3. * Common check permissions method
4. * @param { 菜单访问需要的权限 } authority
5. * @param { 当前角色拥有的权限 } currentAuthority
6. * @param { 通过的组件 Passing components } target
7. * @param { 未通过的组件 no pass components } Exception
8. */
9. const checkPermissions = (authority, currentAuthority, target, Exception) => {
10.   console.log("checkPermissions -----> authority", authority)
11.   console.log("currentAuthority", currentAuthority)
12.   console.log("target", target)
13.   console.log("Exception", Exception)
15.   // 没有判定权限.默认查看所有
16.   // Retirement authority, return target;
17.   if (!authority) {
18.     return target
19.   }
20.   // 数组处理
21.   if (Array.isArray(authority)) {
22.     // 该菜单可由多个角色访问
23.     if (authority.indexOf(currentAuthority) >= 0) {
24.       return target
25.     }
26.     // 当前用户同时拥有多个角色
27.     if (Array.isArray(currentAuthority)) {
28.       for (let i = 0; i < currentAuthority.length; i += 1) {
29.         const element = currentAuthority[i]
30.         // 菜单访问需要的角色权限 < ------ > 当前用户拥有的角色
31.         if (authority.indexOf(element) >= 0) {
32.           return target
33.         }
34.       }
35.     }
36.     return Exception
37.   }
39.   // string 处理
40.   if (typeof authority === "string") {
41.     if (authority === currentAuthority) {
42.       return target
43.     }
44.     if (Array.isArray(currentAuthority)) {
45.       for (let i = 0; i < currentAuthority.length; i += 1) {
46.         const element = currentAuthority[i]
47.         if (authority.indexOf(element) >= 0) {
48.           return target
49.         }
50.       }
51.     }
52.     return Exception
53.   }
55.   throw new Error("unsupported parameters")
56. }
58. const check = (authority, target, Exceptio) => {
59.   return checkPermissions(authority, CURRENT, target, Exception)
60. }

复制代码

首先如果路由表中没有authority字段默认都可以访问。
接着分别对authority为字符串和数组的情况做了处理，其实就是简单的查找匹配，匹配到了就可以访问，匹配不到就返回Exception，也就是我们自定义的异常页面。

有一个点一直没有提：用户当前角色权限 currentAuthority 如何获取？这个是在页面初始化时从接口读取，然后存到 store 中

有了这块逻辑，我们对刚刚的AuthorizedRoute做一下改造。首先抽象一个Authorized组件，对权限校验逻辑做一下封装：

1. import React from "react"
2. import CheckPermissions from "./CheckPermissions"
4. class Authorized extends React.Component {
5.   render() {
6.     const { children, authority, noMatch = null } = this.props
7.     const childrenRender = typeof children === "undefined" ? null : children
8.     return CheckPermissions(authority, childrenRender, noMatch)
9.   }
10. }
11. export default Authorized

复制代码

接着AuthorizedRoute可直接使用Authorized组件：

1. import React from "react"
2. import { Redirect, Route } from "react-router-dom"
3. import Authorized from "./Authorized"
5. class AuthorizedRoute extends React.Component {
6.   render() {
7.     const { component: Component, render, authority, redirectPath, ...rest } = this.props
8.     return (
9.       <Authorized
10.         authority={authority}
11.         noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
12.       >
13.         <Route {...rest} render={props => (Component ? <Component {...props} /> : render(props))} />
14.       </Authorized>
15.     )
16.   }
17. }
19. export default AuthorizedRoute

复制代码

这里采用了render props的方式：如果提供了component props就用component渲染，否则使用render渲染。

菜单权限

菜单权限的处理相对就简单很多了，统一集成到SiderMenu组件处理：

1. export default class SiderMenu extends PureComponent {
2.   constructor(props) {
3.     super(props)
4.   }
6.   /**
7.    * get SubMenu or Item
8.    */
9.   getSubMenuOrItem = item => {
10.     if (item.children && item.children.some(child => child.name)) {
11.       const childrenItems = this.getNavMenuItems(item.children)
12.       // 当无子菜单时就不展示菜单
13.       if (childrenItems && childrenItems.length > 0) {
14.         return (
15.           <SubMenu
16.             title={
17.               item.icon ? (
18.                 <span>
19.                   {getIcon(item.icon)}
20.                   <span>{item.name}</span>
21.                 </span>
22.               ) : (
23.                 item.name
24.               )
25.             }
26.             key={item.path}
27.           >
28.             {childrenItems}
29.           </SubMenu>
30.         )
31.       }
32.       return null
33.     }
34.     return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>
35.   }
37.   /**
38.    * 获得菜单子节点
39.    * @memberof SiderMenu
40.    */
41.   getNavMenuItems = menusData => {
42.     if (!menusData) {
43.       return []
44.     }
45.     return menusData
46.       .filter(item => item.name && !item.hideInMenu)
47.       .map(item => {
48.         // make dom
49.         const ItemDom = this.getSubMenuOrItem(item)
50.         return this.checkPermissionItem(item.authority, ItemDom)
51.       })
52.       .filter(item => item)
53.   }
55.   /**
56.    *
57.    * @description 菜单权限过滤
58.    * @param {*} authority
59.    * @param {*} ItemDom
60.    * @memberof SiderMenu
61.    */
62.   checkPermissionItem = (authority, ItemDom) => {
63.     const { Authorized } = this.props
65.     if (Authorized && Authorized.check) {
66.       const { check } = Authorized
67.       return check(authority, ItemDom)
68.     }
69.     return ItemDom
70.   }
72.   render() {
73.     // ...
74.     return
75.       <Sider
76.         trigger={null}
77.         collapsible
78.         collapsed={collapsed}
79.         breakpoint="lg"
80.         onCollapse={onCollapse}
81.         className={siderClass}
82.       >
83.         <div className="logo">
84.           <Link to="/home" className="logo-link">
85.             {!collapsed && <h1>冯言冯语</h1>}
86.           </Link>
87.         </div>
89.         <Menu
90.           key="Menu"
91.           theme={theme}
92.           mode={mode}
93.           {...menuProps}
94.           onOpenChange={this.handleOpenChange}
95.           selectedKeys={selectedKeys}
96.         >
97.           {this.getNavMenuItems(menuData)}
98.         </Menu>
99.       </Sider>
100.   }
101. }

复制代码

这里我只贴了一些核心代码，其中的checkPermissionItem就是实现菜单权限的关键。他同样用到了上文中的check方法来对当前菜单进行权限比对，如果没有权限就直接不展示当前菜单。
到此这篇关于React中的权限组件设计的文章就介绍到这了,更多相关React权限组件内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！

顶