使用 react-devtools 攻击身份验证

Question

我正在学习 SPA 中基于令牌的身份验证，但我遇到了一个问题。想象一下，我的应用程序中的身份验证过程是通过以下方式完成的：每当用户提供正确的凭据时，我都会给他一个令牌并将 redux 存储中的“已验证”密钥更改为 true，这样他就可以在我的应用程序中查看私有内容。我要隐藏的组件是这样编码的：

if(this.props.authenticated) {
  return <SuperSecretComponentOfIlluminatiMasonic666Chemtrails />
} else {
  return <PublicComponent />
}

我想知道这是否是一种安全的方法，因为任何人都可以安装 react-dev-tools，在浏览器中翻转“已验证”密钥并查看我想要隐藏的内容而无需提供凭据。我的组件应该以不同的方式编码还是一切都很好而我只是出错了？我在很多教程中都看到过这种方法，但是这个问题让我晚上睡不着

Answer 1

您应该从服务器获取受保护的内容，并且该服务器应该仅在用户发送有效令牌时交付内容。

这样，是的，任何人都可以在客户端中拨动开关，但这只会显示 UI 组件，没有任何数据。

这是创建单页应用程序时的常用方法。只要您的客户端从一开始就没有机密或敏感数据，它们就与传递数据的服务器/API 一样安全。