React：如何根据用户角色安全地显示组件

Question

我正在尝试显示 admin Dashboardreact并且Meteor仅当当前用户是admin 时。

我正在调用一个服务器方法，该方法检查用户权限并仅在此方法返回时呈现管理组件true。

此服务器调用是异步的，因此组件未呈现，通常我使用状态管理此异步调用，但我不想在此处公开任何状态（不希望有人更改状态并访问管理仪表板） .

这是代码：

export default class AdminChecker extends Component {
  isItAdmin() {
    // Get the id of current user
    const userId = Meteor.userId();
    if (userId) {
      // call a server method which returns true if current user is Admin
      Meteor.call('checkAdminId', userId, (err, authorized) => {
        if (err) {
          console.log(err);
          return null;
        }
        return (authorized) ? <AdminDashboard /> : null;
      });
    }
  }
  render() {
    return (
      <div className="admin-temp-container">
        {this.isItAdmin()}
      </div>
    );
  }
}

我想我可以在父组件中拥有这个逻辑并将isItAdminto的结果adminDashboard作为道具发送（该adminDashboard组件仅在其道具为 时才会显示信息true）。

但我确信这是否安全。可以使用 Chrome react 开发人员工具或类似工具更改道具吗？

非常感谢

Answer 1

我认为这有两个部分（并且评论暗示了这两个部分）：

首先，您不应该期望能够对客户端实施安全性。您必须在服务器上实现访问控制逻辑（即，任何执行管理员操作的 API 都必须检查执行该操作的用户是否为管理员）。

一旦你这样做了（也许你已经这样做了），那么你可能需要使用 props 或 state 来存储用户是否是管理员（就像你在你的应用程序中存储任何其他数据一样）。

关键是，一旦您在服务器上实施安全性，那么用户是否操纵状态以进入管理仪表板就无关紧要：服务器不会让用户查看任何真实数据或采取任何行动。

这与服务器端渲染完全无关。只要用于获取管理数据和执行管理操作的 API 正在实施它们自己的访问控制检查，您当然可以构建一个安全的管理仪表板，而无需服务器端渲染。