对状态管理的反应安全性

Question

假设我有以下代码：

const UserProfile: React.FC<RouteComponentProps> = (props) => {
const { isAdmin} = useContext(GlobalContext);
if (isAdmin()) {
return <CriticalFeature/>;
} else {
return <NonCriticalFeature/>;
}
}
export default UserProfile;

这段代码的问题在于，有人可以打开 react 网页并查看该状态并更改它(例如使用默认的反应工具(。然后用户将充当管理员(我知道...由于身份验证，不在服务器端，但仍然会看到至少来自管理页面的一些代码(。

你如何处理这种情况？

Answer 1

如果您允许浏览器获取渲染/处理CriticalFeature的代码，则游戏结束。用户可以呈现或以其他方式分析该代码。

解决此问题的唯一方法是永远不要向未经授权的用户提供CriticalFeature代码。为此，管理员配置文件页面的 URL 应与非管理员用户的 URL 不同，并且CriticalFeature的代码应位于仅提供给授权用户的单独捆绑包中。

但是，如果您需要这种级别的分离，IDK;管理员 UI 的一瞥不会允许未经授权的用户执行任何需要管理员权限的操作。仅当您需要密切保护管理员可用的功能集时，您可能才希望实现上述功能。

Answer 2

确实有人可以修改状态并呈现 CriticalFeature 组件，但在这种情况下，最佳做法是向后端发出经过身份验证的请求。

因此，即使有人可以渲染组件，他们也无法在服务器中模拟管理员配置文件。

只要确保您有适当的身份验证

即可