Reactのパーミッションコンポーネントの設計について話します

バックグラウンド

権限管理は、ミドルシステムとバックグラウンドシステムで一般的な要件の1つです。私は以前、Vueに基づくバックグラウンド管理システムでパーミッション制御を行ったことがあります。基本的な考え方は、いくつかのルーティングフックでパーミッションの比較とインターセプト処理を行うことです。

最近保守されたバックグラウンドシステムを権限管理コントロールに追加する必要があります。今回はテクノロジースタックですReact。オンラインReact路由权限控制で検索したところ、より良い解決策やアイデアは見つかりませんでした。

このとき、権利管理は社内で実施されていると思っant design proていたので、時間をかけてソースコードの波を読み、これに基づいて徐々に権利管理を完了していきました。

プロセス全体でも多くの問題が発生しました。この記事では、主に変換作業を要約します。

元のコードはreact16.xとdva2.4.1の実装に基づいているため、この記事ではant-design- prov1内での権限管理の実装について説明します。

いわゆるパーミッションコントロールとは何ですか?

一般に、バックグラウンド管理システムの権限には2つのタイプがあります。

  • リソースのアクセス許可
  • データ許可

リソース権限とは、通常、メニュー、ページ、ボタンなどの表示権限を指します。

データ権限は通常、同じページに異なるデータが表示される異なるユーザーを指します。

この記事では、主にリソースのアクセス許可、つまりフロントエンドのアクセス許可の制御について説明します。これは2つの部分に分かれています。

  • サイドバーメニュー
  • ルーティング権限

多くの人の理解では、フロントエンドの権限制御は左側のメニューの可視性ですが、これは実際には間違っています。たとえば、ユーザーがguestルーティングへの/settingアクセス権を持っていないが/setting、パスを入力することでユーザーが知っている完全なパスに直接アクセスでき、現時点でもアクセス可能であるとします。これは明らかに不合理です。この部分は、実際にはルーティングレベルのパーミッションコントロールに属しています。

アイデアを実現する

フロントエンドのパーミッション制御には、一般的に2つのスキームがあります。

  • フロントエンドの固定ルーティングテーブルとアクセス許可の構成、バックエンドによって提供されるユーザーのアクセス許可の識別
  • バックエンドは、アクセス許可とルーティング情報構造のインターフェイスを提供し、アクセス許可とメニューを動的に生成します

ここでは最初のソリューションを使用します。サービスは現在のユーザーが所有するロールを発行するだけでよく、ルーティングテーブルとアクセス許可の処理はフロントエンドで統合されます。

整体实现思路也比较简单:现有权限(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

その後、コンポーネントをAuthorizedRoute直接使用でき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

ここで採用されているアプローチ:提供されている場合はレンダリングを使用しrender props、提供されていない場合はレンダリングを使用します。component propscomponentrender

メニューの権限

メニュー権限の処理は比較的単純で、SiderMenuコンポーネント処理に統合されています。

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>
  }
}

checkPermissionItemここでは、メニューのアクセス許可を実現するための鍵となるコアコードのみを貼り付けています。また、上記のcheck方法を使用して、現在のメニューの権限を比較しました。権限がない場合、現在のメニューは直接表示されません。

ナゲッツテクノロジーコミュニティのクリエイター署名プログラムの募集に参加しています。リンクをクリックして登録し、送信してください。

おすすめ

転載: juejin.im/post/7118268593501896711