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

Question

如果用户使用用户名和密码登录，他将获得一个新的 api 密钥，所以 React 可以使用他的用户帐户访问 Rest Api。你如何保存这个 api 密钥？如果用户点击 'refresh page' 会发生什么？

当然我每次都可以用

初始化Rest App

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

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

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

我还是不太确定如何使用 react with rest api 使用单独的 api 键。谢谢你

Answer 1

你可以把它放在 Redux store 中。我认为这是最好的实现。

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

你说的API键可能是cookies/authentication令牌。如果是cookies，需要开启httpOnly来防止攻击。对于身份验证令牌，最常见的存储方式是在 localStorage 或 sessionStorage 中。然而，它是不安全的，即使使用 HTTPS 和较短的到期日期（你必须使用它们）。放在Redux store里，就相当于放在一个全局的js object 大家都看得见的地方。

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

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

How to store generated api keys in React?

api-key

reactjs