reactjs - 根据用户角色隐藏一些 React 子组件

Question

我正在使用 React 和 Redux(带有 Node.js 后端)编写一个单页面应用程序。

我想实现基于角色的访问控制，并希望控制应用程序某些部分(或子部分)的显示。

我将从 Node.js 获取权限列表，它只是一个具有以下结构的对象:

{
  users: 'read',
  models: 'write',
  ...
  dictionaries: 'none',
}

key是 protected 资源，

value 是此资源的用户权限(以下之一: none 、 read 、 write )。

我将其存储为 redux 状态。看起来很简单。

none权限将由 react-router 检查路线onEnter/onChange钩子(Hook)或redux-auth-wrapper 。看起来也很简单。

但是最好的申请方式是什么read/write任何组件 View 的权限(例如，如果用户拥有 { models: 'read' } 权限，则隐藏模型组件中的编辑按钮)。

我找到了this solution并根据我的任务对其进行一些更改:

class Check extends React.Component {
  static propTypes = {
    resource: React.PropTypes.string.isRequired,
    permission: React.PropTypes.oneOf(['read', 'write']),
    userPermissions: React.PropTypes.object,
  };

  // Checks that user permission for resource is the same or greater than required
  allowed() {
    const permissions = ['read', 'write'];
    const { permission, userPermissions } = this.props;
    const userPermission = userPermissions[resource] || 'none';

    return permissions.indexOf(userPermission) >= permissions.indexOf(permission)
  }

  render() {
    if (this.allowed()) return { this.props.children };
  }
}

export default connect(userPermissionsSelector)(Check)

哪里userPermissionsSelector会是这样的:(store) => store.userPermisisons并返回用户权限对象。

然后用 Check 包裹 protected 元素:

<Check resource="models" permission="write">
  <Button>Edit model</Button>
</Check>

所以如果用户没有 write models 的许可该按钮将不会显示。

有人做过这样的事吗？还有比这更“优雅”的解决方案吗？

谢谢!

P.S.当然，服务器端也会检查用户权限。

Answer 1

好吧，我想我明白你想要什么。我做了一些对我有用的事情，我喜欢我的方式，但我知道还有其他可行的解决方案。

我写的是 HOC React-router 风格。

基本上，我有我的PermissionsProvider，我可以在其中初始化用户权限。我有另一个 withPermissions HOC，它将我之前提供的权限注入(inject)到我的组件中。

因此，如果我需要检查该特定组件中的权限，我可以轻松访问它们。

// PermissionsProvider.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import hoistStatics from "hoist-non-react-statics";

class PermissionsProvider extends React.Component {
  static propTypes = {
    permissions: PropTypes.array.isRequired,
  };

  static contextTypes = {
    permissions: PropTypes.array,
  };

  static childContextTypes = {
    permissions: PropTypes.array.isRequired,
  };

  getChildContext() {
    // maybe you want to transform the permissions somehow
    // maybe run them through some helpers. situational stuff
    // otherwise just return the object with the props.permissions
    // const permissions = doSomething(this.props.permissions);
    // maybe add some validation methods
    return { permissions: this.props.permissions };
  }

  render() {
    return React.Children.only(this.props.children);
  }
}

const withPermissions = Component => {
  const C = (props, context) => {
    const { wrappedComponentRef, ...remainingProps } = props;

    return (
      <Component permissions={context.permissions} {...remainingProps} ref={wrappedComponentRef} />
    );
  };

  C.displayName = `withPermissions(${Component.displayName || Component.name})`;
  C.WrappedComponent = Component;
  C.propTypes = {
    wrappedComponentRef: PropTypes.func
  };

  C.contextTypes = {
    permissions: PropTypes.array.isRequired
  };

  return hoistStatics(C, Component);
};

export { PermissionsProvider as default, withPermissions };

好吧，我知道这是很多代码。但这些都是 HOC(您可以了解更多 here )。

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.

基本上我这样做是因为我受到了react-router所做的启发。每当你想了解一些路由的东西时，你只需添加装饰器 @withRouter ，它们就会将 props 注入(inject)到你的组件中。 那么为什么不做同样的事情呢？

1. 首先您必须向提供商设置权限
2. 然后在检查权限的组件上使用 withPermissions 装饰器

<小时/>

//App render
return (
   <PermissionsProvider permissions={permissions}>
      <SomeStuff />
   </PermissionsProvider>
);

在SomeStuff内部的某个地方，您有一个广泛传播的工具栏来检查权限？

@withPermissions
export default class Toolbar extends React.Component {
  render() {
    const { permissions } = this.props;

    return permissions.canDoStuff ? <RenderStuff /> : <HeCantDoStuff />; 
  }
}

如果你不能使用装饰器，你可以像这样导出工具栏

export default withPermissions(Toolbar);

这是一个代码沙盒，我在实践中展示了它:

https://codesandbox.io/s/lxor8v3pkz

注释:

• 我确实简化了权限，因为该逻辑来自您的一端，出于演示目的，我简化了它们。
• 我假设权限是一个数组，所以这就是我检查 HOC 中的 PropTypes.array 的原因
• 这是一个非常长且复杂的答案，我试图尽我最大的能力来表达。请不要因为一些错误而拷问我:)