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

时间:2017-10-01 10:53:08

标签: reactjs meteor

我正在尝试在reactMeteor中显示管理信息中心,前提是当前用户是管理员

我正在调用一个服务器方法,该方法仅在此方法返回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发送给adminDashboardadminDashboard组件仅在其props为{时才会显示信息{1}})。

但我确保这是否安全。可以用Chrome改变道具反应开发者工具或类似的东西吗?

非常感谢

1 个答案:

答案 0 :(得分:4)

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

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

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

关键是,一旦你在服务器上强制执行安全性,那么用户是否操纵状态到达管理仪表板并不重要:服务器不会让用户查看任何真实数据或采取任何实际数据无论如何都要采取行动。

这与服务器端呈现完全无关。只要用于获取管理数据和执行管理操作的API正在实施自己的访问控制检查,您肯定可以在没有服务器端呈现的情况下构建安全的管理仪表板。