如何根据React中的用户角色显示表行

Question

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

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

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

将来会有更多列添加到此表中并进行以下操作：

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

不会有效。

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

请帮我

谢谢

Answer 1

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

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

使用您当前的方法，用户只需检查浏览器网络选项卡并读取所有其他受限制的列。