1

我创建了呈现从服务器接收的数据的表。但在这张表中，我有并非所有用户都应该看到的列。这是我的代码：

class TableBody extends React.Component {
  state = {
    columns: {
      id: props => (
        <td key="id">
          {props._id}
        </td>
      ),
      title: props => (
        <td key="title">
          {props.title}
        </td>
      ),
      manager: props => (
        <td key="manager">
          {props.manager}
        </td>
      )
  },
  hiddenColumns: {
    user: ['manager']
  }
}

在状态下，我初始化我的列并为用户添加列限制（他看不到经理列）。在渲染中，我接下来要做：

render() {
    const hiddenColumns = this.state.hiddenColumns[this.props.role] || [];
    const columns = Object.keys(this.state.columns).filter(key => {
      return hiddenColumns.indexOf(key) === -1
    });

    return this.props.companies.map(company => (
      <tr key={offer._id}>
        {columns.map(element => this.state.columns[element](company))}
      </tr>
    ));
  }

我得到当前用户的隐藏列和列中的过滤键。在此之后，我使用地图检查从服务器接收的数据，并在地图内部检查每个过滤列并发送元素（道具）。

将来，将在此表中添加更多列并使其成为：

{columns.map(element => this.state.columns[element](company))}

不会有效。

也许我可以创建主模板并在初始化后删除用户不应该看到的列，但我不知道如何。

请帮我

谢谢

4

1 回答 1

0

我认为你这样做是完全错误的。您永远不应该在客户端过滤特定于用户角色的数据。

理想情况下，此类数据应在服务器端进行过滤，然后仅将特定角色的数据发送给客户端。

使用您当前的方法，用户可以简单地检查浏览器网络选项卡并阅读所有其他受限列。

于 2018-07-07T18:39:28.170 回答