Question

如果用户使用用户名和密码登录，他将获得一个新的api密钥，因此react可以使用其用户帐户访问Rest Api。您如何保存此api密钥？如果用户单击“刷新页面”会发生什么？

当然，我每次都可以使用来初始化Rest App

<script>
    window.REP_LOG_API_KEY = '19e8317a38b24af82da056f6ed36e831ea6b8f9bfcad996aaa56ec773f9f2e1d';
</script>
<script src="build/reactapp.js"></script>

但看起来不太安全（但我喜欢更改此密钥的想法每个页面请求，如果您没有单个页面应用程序并且做出反应仅在此处和此处使用。）

也可以将Api密钥存储在cookie中（安全但不能 httponly，通常我只使用安全的cookie）。这是唯一的方法吗？

我仍然不太确定如何使用rest api来响应带有单独的api键。谢谢你。

Answer 1

您正在谈论的API密钥可能是cookie /身份验证令牌。如果是cookie，则需要启用httpOnly以防止攻击。对于身份验证令牌，最常见的存储方式是localStorage或sessionStorage。但是，即使使用HTTPS和较短的到期日期，它也是不安全的（您必须使用它们）。将其放入Redux存储区与将其放入每个人都可以看到的全局js对象中相同。

保护您的应用程序的方法是检查标准标头，以验证请求是否来自同一来源（源和目标来源检查）和CSRF令牌。同样常见的模式是在存储和使用令牌之前验证令牌签名。您可以在此处查看Auth0博客的存储位置：https://auth0.com/docs/security/store-tokens

Answer 2

有几种方法可以做到这一点。如果您使用的是Redux，MobX，Flux等状态管理库，则可以将其放在那里。

另一个存储它们的地方是浏览器本地存储。即使用户刷新页面或打开新标签页，这也将保留令牌。但是，我不确定100％是否这样做是安全的。

或者您可以将其附加到Rest Client本身。 IMO，这是最好的方法。我将简要概述执行此操作的步骤。

通过包装诸如fetch-api或axios之类的解决方案来创建Rest Client。
添加模块状态，可以在其中存储任何数据
无论何时拨打电话，都要检查是否有令牌，如果状态中没有令牌，则首先进行身份验证。
如果令牌存在，请使用它进行api调用。如果请求失败并出现403（或可能是401。取决于情况）错误，则表示令牌可能已过期。因此，再次进行身份验证并更新令牌。

这样的事情，

class ApiClient {
  constructor() {
     this.token = null;
  }

  login(username, password) {
     // make the call to login
     // set this.token with the response
  }

  request() {
     // Make the API call using the token
  }
}

刷新会发生什么？然后，由于令牌不存在，因此需要再次进行身份验证。如果您使用cookie来管理会话，这将不是问题。

Answer 3

您可以将其放在Redux商店中。我认为这是最好的实现方式。

如何在React中存储生成的api密钥？

3 个答案: