在 ReactJS 中实现身份验证持久性的正确方法是什么答案

【问题标题】：What is the correct way to implement authentication persistence in ReactJS在 ReactJS 中实现身份验证持久性的正确方法是什么
【发布时间】：2021-08-29 11:30:06
【问题描述】：

在我的 React 项目中，我使用 Firebase 身份验证实现了身份验证。成功登录后，用户详细信息将存储在 localStorage 的“用户”对象中，并一直存储到用户特别注销为止。正是这个 'user' 对象的存在用于检查此人是否经过身份验证，然后打开受保护的路由。

但是，这种方法会导致一个问题，即可能会从 localStorage 复制用户详细信息，然后使用控制台手动设置它们。这将导致该用户在未使用其密码进行身份验证的情况下登录。

那么在 React 中实现身份验证持久化的正确和安全的方法是什么

【问题讨论】：

标签： reactjs firebase security authentication firebase-authentication

【解决方案1】：

像user对象一样，任何敏感信息都不应该存储在localStorage中，更好的选择是使用HTTP only cookie。

这篇文章回答了你的问题以及为什么你应该在 localStorage 上使用仅 HTTP cookie：

https://stackoverflow.com/a/37396572/15881471

当与 HttpOnly cookie 标志一起使用时，cookie 不能通过 JavaScript 访问并且不受 XSS 影响。您还可以设置 Secure cookie 标志以保证 cookie 仅通过 HTTPS 发送

【讨论】：

感谢您的回答。我考虑过使用 httpOnly cookie，但我不确定如何在 React 中设置这些 cookie。我知道在 NodeJS 中，我们可以通过响应对象设置 cookie，然后这些 cookie 随后在每个请求中发送。但是，我不确定如何对 React 做同样的事情。我查看了 firebase auth 文档，但似乎没有找到解决方案