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

Question

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

当然，我每次都可以使Rest应用程序无效

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

但是看起来不太安全(但是我喜欢在每个页面请求中更改这个键的想法，如果您没有单一的页面应用程序，并且只在这里和那里使用这个键)。

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

我仍然不太确定如何使用带有单个api键的rest。是你。

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等状态管理库，那么您可以将其放在那里。

另一个存储它们的地方是在浏览器本地存储中。这将保持令牌保存，即使用户刷新页面或打开一个新的选项卡等。然而，我不确定这是否是一个安全的事情做。

或者您可以将其附加到Rest客户端本身。海事组织，这是最好的方法。我将简要总结这方面的步骤。

1. 通过包装解决方案创建Rest客户端，如fetch-api或axios。
2. 添加模块状态，您可以在其中存储任何数据
3. 无论何时打电话，都要检查是否存在令牌，如果状态中没有令牌，则先进行身份验证。
4. 如果令牌在那里，请使用它进行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商店里。我认为这是最好的实施。