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

仅当当前用户是管理员时，我才尝试在

react

和

Meteor

中显示管理员仪表板

我正在调用一个服务器方法，该方法检查用户权限，并且仅当此方法返回

true

时才呈现管理组件

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

代码如下：

导出默认类AdminChecker扩展组件{
isItAdmin（）{
//获取当前用户的id
const userId=Meteor.userId（）；
如果（用户ID）{
//调用一个服务器方法，如果当前用户是Admin，该方法将返回true
Meteor.call（'checkAdminId'，userId，（err，authorized）=>{
如果（错误）{
控制台日志（err）；
返回null；
}
返回（授权）？：空；
});
}
}
render（）{
返回(
{this.isItAdmin（）}
);
}
}

我认为我可以在父组件中使用此逻辑，并将

isItAdmin

的结果作为道具发送到

adminDashboard

（只有当其道具为

true

时，

adminDashboard

组件才会显示信息）

但如果这是安全的，我有保险。可以用Chrome react开发者工具或类似的东西来改变道具吗

---

非常感谢

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

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

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

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

---

这与服务器端渲染完全无关。只要用于获取管理数据和执行管理操作的API实现自己的访问控制检查，您就可以在不进行服务器端渲染的情况下构建安全的管理仪表板。

是的，在控制台中只需很少的努力就可以更改道具。您的方法并不特别安全，但可能足以满足您的需要。很难根据指示管理员角色的布尔标志来制作客户端组件。你肯定需要一个方法对应物，因为你需要假设有人在客户端伪造了管理员角色我不知道这是否对你有帮助，但通常在我的项目中，我使用redux存储来获取用户角色，我编写了一个更高阶的组件，从redux存储读取状态并呈现正确的组件，当然，redux devtools只能在开发模式下启用。忘了提到，非常敏感的区域也可以呈现在服务器端，并且只能呈现给管理员的数据只有在角色匹配的情况下才会发布，我不得不补充，你们不应该有任何关于客户端的敏感信息。根本不要信任客户。在您的特殊情况下，唯一安全的解决方案是SSR。我完全同意你的观点，但问题本身并不是关于实现服务器端检查之类的。问题是“根据用户角色在客户端上显示/隐藏UI组件是否安全？”。对此，我的回答是“信任客户永远都不安全”。对于这个特殊的问题，唯一安全的解决方案是SSR。我想我可以看到，在获取数据以填充管理仪表板时，SSR被用作访问控制的解决方案。但是调用API来采取行动呢？我想你将无法使用AJAX。。。你需要使用HTML表单或其他东西。即使你做了所有这些来实现客户端访问控制，你仍然有一个问题，那就是你的服务允许任意用户执行管理操作。然后，您将自己暴露在一系列广泛的漏洞中。e、 例如，您需要阻止对服务的internet访问（以防有人发现API）。但即便如此，您环境中任何地方的任意代码执行漏洞都会授予对这些管理功能的访问权限。（漏洞列表还在继续，但这些注释太短，无法全部列出……）为什么您认为SSR应该替代API中的控制检查？这两件事并不排斥。当然，API应该控制检查，但问题本身并不是这样的。