如何在 React 中获取仅限 HTTP 的 cookie？答案

【问题标题】：How to get HTTP-only cookie in React?如何在 React 中获取仅限 HTTP 的 cookie？
【发布时间】：2021-10-28 09:39:13
【问题描述】：

我目前正在开发一个 MERN 堆栈应用程序，我使用的身份验证是 JWT 并将其保存在我的 cookie 中。这就是我在用户登录后发送 cookie 的方式。

              res
                .cookie("token", token, {
                  httpOnly: true,
                  secure: true,
                  sameSite: "none",
                })
                .send();

我通过在后端获取“令牌”cookie 来登录用户。但是，我用这个应用程序实现了 Redux，每次刷新页面时，它都会自动注销。我想要的是在我的前端（React）中检测浏览器中的“令牌”cookie，但我无法得到它。我试过使用 npm js-cookie 仍然无法得到它。有没有办法获得“令牌”cookie？或者根据我读过的内容使用 redux-persist？请帮忙，谢谢。

【问题讨论】：

标签： node.js reactjs cookies redux jwt

【解决方案1】：

你不能。 “httpOnly”表示“JavaScript 无法访问它”。

使用 Redux-Persist 也不会真正帮助您确定您是否仍在登录或会话是否超时。该数据可能在数周前就已保留，或者令牌可能已被撤销。

您可以做的最明智的事情是在服务器上设置一个/whoami 端点，并作为您的应用程序初始化在那里发送请求时的第一个操作。关于您的用户的任何信息都回来了 -> 很好，保存并显示它。否则你会得到一个“401未授权”，这意味着用户没有登录，需要登录。

【讨论】：

【解决方案2】：

就像其他答案已经解释的那样，您无法通过 JS 访问 httpOnly cookie。

我个人建议您使用不同的方法。当然，cookie 和 httpOnly 听起来是个好主意，你可能认为 cookie 比 localStorage 好上千倍，但最后，将令牌存储在 localStorage 还是 cookie 中并不重要。您可能会争论 cookie 与 localStorage 几个小时，但两者都有其漏洞（例如：cookie：CSRF-Attacks (https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)、localStorage: XSS），而且这两种方法都不是最好的方法。

现在，虽然理论上您可以在这里使用 localStorage，但我并不提倡使用它。我会建议您放弃 cookie 和 localStorage 并将 JWT 存储在您的应用程序状态中（无论是使用 context-api、redux 等）并发送带有身份验证标头的 JWT 以及您从前面发出的所有请求到后端。当然，您的后端将需要验证该令牌。例如，您可以只实现一个身份验证中间件，将其添加到所有需要身份验证的路由中。过期也很容易，因为您不必再同步 JWT 和 cookie 的过期时间。只需在 JWT 上设置过期时间，然后在 auth 中间件中验证该令牌即可。如果你想知道为什么这种方法对 CSRF 攻击是安全的，请看这里：Where to store JWT in browser? How to protect against CSRF?

这里有一些不错的文章，我真的建议你阅读一下第一篇： https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/ https://medium.com/@ryanchenkie_40935/react-authentication-how-to-store-jwt-in-a-cookie-346519310e81

【讨论】：