Question

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

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遍历从服务器和map内部接收的数据，遍历每个过滤的列并发送元素（属性）。

将来，更多列将添加到该表中，并使其：

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

将无效。

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

请帮助我

谢谢

Answer 1

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

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

使用当前的方法，用户只需检查浏览器的“网络”标签并阅读所有其他受限列。

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

1 个答案: