我应该在哪里存储我的 JWT 令牌以及 httpOnly 对 cookie 意味着什么？

问题描述

我阅读了有关身份验证的文档。我在 Nuxt 项目上工作，我的服务器返回一个 cookie HtppOnly

我的问题：

关于 JWT 令牌的存储有很多困惑，有些人不建议使用 localStroage 我还读到我们可以直接在下一个请求的标头中复制令牌，但我没有找到示例。此外，当 cookie 为 HttpOnly 时，我们如何使用它，因为 JavaScript 无法访问它？

// https://github.com/FormidableLabs/urql/tree/main/exchanges/auth#quick-start-guide
if (result.data?.refreshLogin) {
  // save the new tokens in storage for next restart
  localStorage.setItem('token',result.data.refreshLogin.token);
  localStorage.setItem('refreshToken',result.data.refreshLogin.refreshToken);
  //...
}

资源：

解决方法

为 JWT 使用 cookie 比使用 localStorage 更安全。并且您经常使用 accessToken 刷新的 refreshToken 的过期时间很短。

以下是对httpOnly效果的完美解释：https://www.ibm.com/mysupport/s/question/0D50z000062kLbCCAU/is-there-a-way-to-read-browser-cookie-with-httponly-flag-set-on-ibpm-856-cf02-

客户端 API（例如 JavaScript）无法访问 HttpOnly cookie。此限制消除了通过跨站点脚本 (XSS) 窃取 cookie 的威胁。如果浏览器允许您访问它，那将是浏览器的缺陷。

如果您希望浏览器修改某个特定 cookie 并且不担心 XSS，您可以删除 HTTPOnly 标志。只有服务器端代码才能访问这些 cookie。

如果您希望您的 cookie 被您的客户端代码修改，您只能设置 secure: true 并允许它用于更多的 httpOnly。

cookie-universal-nuxt 非常适合管理客户端 cookie。

回复您的评论：

你说的是什么中间件？

您的工作是否与 Insomnia 类似？发送 GQL 调用，看看您是否有东西。

我只在客户端使用过 GQL，所以我会就它应该在哪里提供反馈，但它可能不是 100% 准确。

您应该有一些后端逻辑来处理整个登录流程，但是如果您想管理某人是否登录的事实，这确实会在前端。您将需要一些状态来查看要向最终用户显示的内容。当然，这取决于您的应用程序仅作为 SPA 运行并且您的后端用作 GQL API 的假设。但是您可能有各种方法来解决这个问题，具体取决于您页面的隐私程度等等。很难给出这么宽泛的答案。
两个后端都处理 JWT。客户端负责存储它并检查它是否过期，然后刷新它。它将它发送到后端以查看您是否可以访问请求的数据等等。对于前端，如果您想将其保留在 cookie 中以在刷新之间保持不变，那么它就在前端。
JWT 刷新令牌存储在前端。当它过期时，您的前端应该将它发送到您的后端以更新它的值。然后，您可以保留更新的版本，直到它再次过期。
如果通过资源请求，您的意思是访问包含在您的数据库中的值，这是一些后端工作。您的前端负责调用查询/变异，甚至不知道幕后是什么。这就是 GQL 的全部意义，通过删除典型 REST API 确实具有的所有可能端点，使前端更友好。

总结

您的前端不能包含敏感信息，这是到达这里的主要内容。

您的大部分问题都知道涉及堆栈的哪一侧。我不确定您是否是全栈开发人员，但您可能应该阅读一些关于 GQL 工作原理的文章。

此外，这里有很多的问题。我确实建议尝试一次只关注一件事，而不是同时处理多种方法，否则整体上很难理解。

此外，StackOverflow 上的那些帖子（询问很多事情）将立即关闭。

nuxt-auth nuxt.js urql