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

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

当然，我每次都可以用它初始化Rest应用程序

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

window.REP_LOG_API_KEY='19e8317a38b24af82da056f6ed36e831ea6b8f9bfcad996aaa56ec773f9f2e1d'；

但是看起来不太安全（但是我喜欢换这把钥匙的主意 每个页面请求，如果您没有单页应用程序，请进行响应 只在这里和那里使用）

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

我仍然不太确定如何使用restapi的react

---

使用单独的api键。谢谢你。

你可以把它放在Redux商店里。我认为这是最好的实现。

你可以把它放在Redux商店里。我认为这是最好的实现。

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

另一个存储它们的地方是浏览器本地存储。即使用户刷新页面或打开新选项卡等，这也会保存令牌。但我不能100%确定这样做是否安全

或者您可以将其附加到Rest客户端本身。依我看，这是最好的办法。我将简要总结一下实现这一点的步骤

通过包装解决方案（如FetchAPI或axios）创建Rest客户端

添加一个模块状态，您可以在其中存储任何数据

无论何时进行呼叫，都要检查是否有令牌，如果状态中没有令牌，则首先进行身份验证

如果令牌存在，则使用它进行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
  }
}

---

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

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

另一个存储它们的地方是浏览器本地存储。即使用户刷新页面或打开新选项卡等，这也会保存令牌。但我不能100%确定这样做是否安全

或者您可以将其附加到Rest客户端本身。依我看，这是最好的办法。我将简要总结一下实现这一点的步骤

通过包装解决方案（如FetchAPI或axios）创建Rest客户端

添加一个模块状态，您可以在其中存储任何数据

无论何时进行呼叫，都要检查是否有令牌，如果状态中没有令牌，则首先进行身份验证

如果令牌存在，则使用它进行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
  }
}

---

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

您谈论的API密钥可能是cookies/身份验证令牌。如果是Cookie，则只需启用httpOnly以防止攻击。对于身份验证令牌，最常见的存储方式是本地存储或会话存储。然而，它是不安全的，即使使用HTTPS和较短的到期日（并且您必须使用它们）。将它放在Redux存储中与将它放在每个人都可以看到的全局js对象中是一样的

---

保护您的应用程序的方法是检查标准标头，以验证请求是否为同一来源（源和目标来源检查）和CSRF令牌。还有一种常见模式是在存储和使用令牌签名之前对其进行验证。您可以查看Auth0博客，了解它的存储位置：

您谈论的API密钥可能是cookies/身份验证令牌。如果是Cookie，则只需启用httpOnly以防止攻击。对于身份验证令牌，最常见的存储方式是本地存储或会话存储。然而，它是不安全的，即使使用HTTPS和较短的到期日（并且您必须使用它们）。将它放在Redux存储中与将它放在每个人都可以看到的全局js对象中是一样的

---

保护您的应用程序的方法是检查标准标头，以验证请求是否为同一来源（源和目标来源检查）和CSRF令牌。还有一种常见模式是在存储和使用令牌签名之前对其进行验证。您可以在这里查看Auth0博客的存储位置：

哇，真的吗？哇，真的吗？谢谢。是的，我想我需要一块饼干。或者我使用api键在html中初始化react api，并在react启动后立即重新生成新的api键。当用户重新加载时，相同的游戏将再次进行，无需重新登录。所以api密钥永远不会永久存储在React中。谢谢。是的，我想我需要一块饼干。或者我使用api键在html中初始化react api，并在react启动后立即重新生成新的api键。当用户重新加载时，相同的游戏将再次进行，无需重新登录。因此，api密钥永远不会永久存储在React中。