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

Question

我试图在react 和Meteor 中显示一个管理员仪表板，前提是当前用户是管理员。

我正在调用一个服务器方法来检查用户权限并仅在此方法返回 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>
    );
  }
}

我认为我可以在父组件中包含此逻辑并将isItAdmin 的结果作为道具发送到adminDashboard（adminDashboard 组件仅在其道具为true 时才会显示信息）。

但我确信这是否安全。可以用 Chrome react 开发者工具或类似的东西来改变道具吗？

非常感谢

Answer 1

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

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

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

关键点是，一旦你在服务器上实施了安全措施，那么用户是否操纵状态来访问管理仪表板就无关紧要了：服务器不会让用户查看任何真实数据或获取任何数据无论如何都要行动。

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