Talk about the design of permission components in React

background

Permission management is one of the common requirements in middle and background systems. I have done permission control in the background management system based on Vue before. The basic idea is to do permission comparison and interception in some routing hooks.

A background system that was recently maintained needs to be added to the permission management control. This time, the technology stack is React. I just searched some online React路由权限控制, but I didn't find a better solution or idea.

At this time, I thought ant design prothat rights management had been implemented internally, so I took the time to read a wave of source code, and gradually completed this rights management on this basis.

The whole process also encountered many problems. This article mainly summarizes the transformation work.

The original code is based on the implementation of react 16.x and dva 2.4.1, so this article refers to the implementation of permission management within ant-design-pro v1

What is the so-called permission control?

Generally, the permissions of the background management system involve two types:

• Resource permissions
• data permission

Resource permissions generally refer to the visibility permissions of menus, pages, buttons, etc.

Data permissions generally refer to different users seeing different data on the same page.

This article is mainly to discuss resource permissions, that is, front-end permission control. This is divided into two parts:

• sidebar menu
• Routing permissions

In the understanding of many people, the front-end permission control is the visibility of the left menu. In fact, this is wrong. For example, suppose the user does not have access rights to guestrouting , but the complete path he knows can be accessed directly by entering the path, and it is still accessible at this time. This is obviously unreasonable. This part actually belongs to the permission control at the routing level./setting/setting

Realize ideas

There are generally two schemes for front-end permission control:

• Front-end fixed routing table and permission configuration, user permission identification provided by back-end
• The back-end provides permissions and routing information structure interfaces, and dynamically generates permissions and menus

We use the first solution here. The service only needs to issue the roles owned by the current user, and the processing of routing tables and permissions is unified at the front end.

整体实现思路也比较简单：现有权限（currentAuthority）和准入权限（authority）做比较，如果匹配则渲染和准入权限匹配的组件，否则渲染无权限组件（403 页面）

路由权限

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

{
    "name": "活动列表",
    "path": "/activity-mgmt/list",
    "key": "/activity-mgmt/list",
    "exact": true,
    "authority": [
        "admin"
    ],
    "component": ƒ LoadableComponent(props),
    "inherited": false,
    "hideInBreadcrumb": false
},
{
    "name": "优惠券管理",
    "path": "/coupon-mgmt/coupon-rule-bplist",
    "key": "/coupon-mgmt/coupon-rule-bplist",
    "exact": true,
    "authority": [
        "admin",
        "coupon"
    ],
    "component": ƒ LoadableComponent(props),
    "inherited": true,
    "hideInBreadcrumb": false
},
{
    "name": "营销录入系统",
    "path": "/marketRule-manage",
    "key": "/marketRule-manage",
    "exact": true,
    "component": ƒ LoadableComponent(props),
    "inherited": true,
    "hideInBreadcrumb": false
}

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

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

import React, { createElement } from "react"
import Loadable from "react-loadable"

"/activity-mgmt/list": {
    component: dynamicWrapper(app, ["activityMgmt"], () => import("../routes/activity-mgmt/list"))
},
// 动态引用组件并注册model
const dynamicWrapper = (app, models, component) => {
  // register models
  models.forEach(model => {
    if (modelNotExisted(app, model)) {
      // eslint-disable-next-line
      app.model(require(`../models/${model}`).default)
    }
  })

  // () => require('module')
  // transformed by babel-plugin-dynamic-import-node-sync
  // 需要将routerData塞到props中
  if (component.toString().indexOf(".then(") < 0) {
    return props => {
      return createElement(component().default, {
        ...props,
        routerData: getRouterDataCache(app)
      })
    }
  }
  // () => import('module')
  return Loadable({
    loader: () => {
      return component().then(raw => {
        const Component = raw.default || raw
        return props =>
          createElement(Component, {
            ...props,
            routerData: getRouterDataCache(app)
          })
      })
    },
    // 全局loading
    loading: () => {
      return (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <Spin size="large" className="global-spin" />
        </div>
      )
    }
  })
}

有了路由表这份基础数据，下面就让我们来看下如何通过一步步的改造给原有系统注入权限。

先从src/router.js这个入口开始着手：

// 原src/router.js
import dynamic from "dva/dynamic"
import { Redirect, Route, routerRedux, Switch } from "dva/router"
import PropTypes from "prop-types"
import React from "react"
import NoMatch from "./components/no-match"
import App from "./routes/app"

const { ConnectedRouter } = routerRedux

const RouterConfig = ({ history, app }) => {
  const routes = [
    {
      path: "activity-management",
      models: () => [import("@/models/activityManagement")],
      component: () => import("./routes/activity-mgmt")
    },
    {
      path: "coupon-management",
      models: () => [import("@/models/couponManagement")],
      component: () => import("./routes/coupon-mgmt")
    },
    {
      path: "order-management",
      models: () => [import("@/models/orderManagement")],
      component: () => import("./routes/order-maint")
    },
    {
      path: "merchant-management",
      models: () => [import("@/models/merchantManagement")],
      component: () => import("./routes/merchant-mgmt")
    }
    // ...
  ]

  return (
    <ConnectedRouter history={history}>
      <App>
        <Switch>
          {routes.map(({ path, ...dynamics }, key) => (
            <Route
              key={key}
              path={`/${path}`}
              component={dynamic({
                app,
                ...dynamics
              })}
            />
          ))}
          <Route component={NoMatch} />
        </Switch>
      </App>
    </ConnectedRouter>
  )
}

RouterConfig.propTypes = {
  history: PropTypes.object,
  app: PropTypes.object
}

export default RouterConfig

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

function RouterConfig({ history, app }) {
  const routerData = getRouterData(app)
  const BasicLayout = routerData["/"].component
  return (
    <ConnectedRouter history={history}>
      <Switch>
        <AuthorizedRoute path="/" render={props => <BasicLayout {...props} />} />
      </Switch>
    </ConnectedRouter>
  )
}

来看下AuthorizedRoute的大致实现：

const AuthorizedRoute = ({
  component: Component,
  authority,
  redirectPath,
  {...rest}
}) => {
  if (authority === currentAuthority) {
    return (
      <Route
      {...rest}
      render={props => <Component {...props} />} />
    )
  } else {
    return (
      <Route {...rest} render={() =>
        <Redirect to={redirectPath} />
      } />
    )
  }
}

我们看一下这个组件有什么问题：页面可能允许多个角色访问，用户拥有的角色也可能是多个（可能是字符串，也可呢是数组）。

直接在组件中判断显然不太合适，我们把这部分逻辑抽离出来：

/**
 * 通用权限检查方法
 * Common check permissions method
 * @param { 菜单访问需要的权限 } authority
 * @param { 当前角色拥有的权限 } currentAuthority
 * @param { 通过的组件 Passing components } target
 * @param { 未通过的组件 no pass components } Exception
 */
const checkPermissions = (authority, currentAuthority, target, Exception) => {
  console.log("checkPermissions -----> authority", authority)
  console.log("currentAuthority", currentAuthority)
  console.log("target", target)
  console.log("Exception", Exception)

  // 没有判定权限.默认查看所有
  // Retirement authority, return target;
  if (!authority) {
    return target
  }
  // 数组处理
  if (Array.isArray(authority)) {
    // 该菜单可由多个角色访问
    if (authority.indexOf(currentAuthority) >= 0) {
      return target
    }
    // 当前用户同时拥有多个角色
    if (Array.isArray(currentAuthority)) {
      for (let i = 0; i < currentAuthority.length; i += 1) {
        const element = currentAuthority[i]
        // 菜单访问需要的角色权限 < ------ > 当前用户拥有的角色
        if (authority.indexOf(element) >= 0) {
          return target
        }
      }
    }
    return Exception
  }

  // string 处理
  if (typeof authority === "string") {
    if (authority === currentAuthority) {
      return target
    }
    if (Array.isArray(currentAuthority)) {
      for (let i = 0; i < currentAuthority.length; i += 1) {
        const element = currentAuthority[i]
        if (authority.indexOf(element) >= 0) {
          return target
        }
      }
    }
    return Exception
  }

  throw new Error("unsupported parameters")
}

const check = (authority, target, Exception) => {
  return checkPermissions(authority, CURRENT, target, Exception)
}

首先如果路由表中没有authority字段默认都可以访问。

接着分别对authority为字符串和数组的情况做了处理，其实就是简单的查找匹配，匹配到了就可以访问，匹配不到就返回Exception，也就是我们自定义的异常页面。

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

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

import React from "react"
import CheckPermissions from "./CheckPermissions"

class Authorized extends React.Component {
  render() {
    const { children, authority, noMatch = null } = this.props
    const childrenRender = typeof children === "undefined" ? null : children
    return CheckPermissions(authority, childrenRender, noMatch)
  }
}

export default Authorized

The component can then AuthorizedRoutebe used directly Authorized:

import React from "react"
import { Redirect, Route } from "react-router-dom"
import Authorized from "./Authorized"

class AuthorizedRoute extends React.Component {
  render() {
    const { component: Component, render, authority, redirectPath, ...rest } = this.props
    return (
      <Authorized
        authority={authority}
        noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
      >
        <Route {...rest} render={props => (Component ? <Component {...props} /> : render(props))} />
      </Authorized>
    )
  }
}

export default AuthorizedRoute

The approach taken here : use rendering render propsif provided , otherwise use rendering.component propscomponentrender

menu permissions

The processing of menu permissions is relatively simple and integrated into SiderMenucomponent processing:

export default class SiderMenu extends PureComponent {
  constructor(props) {
    super(props)
  }

  /**
   * get SubMenu or Item
   */
  getSubMenuOrItem = item => {
    if (item.children && item.children.some(child => child.name)) {
      const childrenItems = this.getNavMenuItems(item.children)
      // 当无子菜单时就不展示菜单
      if (childrenItems && childrenItems.length > 0) {
        return (
          <SubMenu
            title={
              item.icon ? (
                <span>
                  {getIcon(item.icon)}
                  <span>{item.name}</span>
                </span>
              ) : (
                item.name
              )
            }
            key={item.path}
          >
            {childrenItems}
          </SubMenu>
        )
      }
      return null
    }
    return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>
  }

  /**
   * 获得菜单子节点
   * @memberof SiderMenu
   */
  getNavMenuItems = menusData => {
    if (!menusData) {
      return []
    }
    return menusData
      .filter(item => item.name && !item.hideInMenu)
      .map(item => {
        // make dom
        const ItemDom = this.getSubMenuOrItem(item)
        return this.checkPermissionItem(item.authority, ItemDom)
      })
      .filter(item => item)
  }

  /**
   *
   * @description 菜单权限过滤
   * @param {*} authority
   * @param {*} ItemDom
   * @memberof SiderMenu
   */
  checkPermissionItem = (authority, ItemDom) => {
    const { Authorized } = this.props

    if (Authorized && Authorized.check) {
      const { check } = Authorized
      return check(authority, ItemDom)
    }
    return ItemDom
  }

  render() {
    // ...
    return
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        breakpoint="lg"
        onCollapse={onCollapse}
        className={siderClass}
      >
        <div className="logo">
          <Link to="/home" className="logo-link">
            {!collapsed && <h1>冯言冯语</h1>}
          </Link>
        </div>

        <Menu
          key="Menu"
          theme={theme}
          mode={mode}
          {...menuProps}
          onOpenChange={this.handleOpenChange}
          selectedKeys={selectedKeys}
        >
          {this.getNavMenuItems(menuData)}
        </Menu>
      </Sider>
  }
}

Here I only paste some core code, which checkPermissionItemis the key to realizing menu permissions. He also used the above checkmethod to compare the permissions of the current menu. If there is no permission, the current menu will not be displayed directly.

I am participating in the recruitment of the creator signing program of the Nuggets Technology Community, click the link to register and submit .