reactjs - react : How to safely display a component according to user role

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 的结果作为 Prop 发送到 adminDashboard (adminDashboard 组件仅当其 props 为 true 时才会显示信息)。

但我确定这是否安全。可以使用 Chrome React 开发者工具或类似工具来更改 props 吗？

非常感谢

Answer 1

我认为这有两个部分(评论都暗示了这两部分):

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

一旦您完成了此操作(也许您已经这样做了)，那么您可能需要使用 props 或 state 来存储用户是否是管理员(就像您在应用程序中存储任何其他数据一样)。

关键点是，一旦您在服务器上实现安全性，那么用户是否操纵状态来访问管理仪表板并不重要:服务器不会让用户查看任何真实数据或获取任何数据。无论如何都要采取行动。

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