ReactJS 应用程序中奇怪的 cookie 行为

Question

目前，我正在开发一个分类广告网站，我在前端使用 ReactJS。不幸的是，现在我在 cookie 行为方面遇到了一些问题，所以我试图找出问题所在，但很多天都没有运气。问题是，我使用 cookie 将用户电子邮件和用户 ID 保存在 cookie 中，以检查它是否已登录或退出。出于某种原因，有时必须刷新页面才能从 cookie 中获取用户电子邮件和 ID。第二个问题是用户退出后，浏览页面并刷新站点，用户再次登录，我不知道这是怎么回事。

请观看视频以查看正在运行的错误https://youtu.be/Xrhw2Oa9_1k

链接到存储库https://github.com/tourniquet/classified-frontend-react

另外，如果有一些关于如何管理记录的用户数据的好教程，请不要犹豫与我分享。提前谢谢！

Answer 1

如果我正确理解了你的问题

• 您正在尝试注销，但应用刷新后您已登录
• 有时您也需要刷新以获取电子邮件和 ID

这是一个很常见的问题，我必须说被低估了，现代浏览器在强制刷新/重新打开等之前不会真正删除站点数据......

为了解决这个问题，我建议您保留相同的逻辑来删除 cookie，但交换数据结构和条件逻辑以检查登录活动。

所以改变你的存储空间

id = ...
email = ......

到

userData: {
  id: ....,
  email: ......
}

您必须在读取 cookie 时使用 JSON.parse 并使用 JSON.stringify 来保存数据

但是这么多努力是为了什么？你会得到什么？

• 有组织的用户信息

• 处理 cookie 未被删除的问题 - 通过将 cookie 设置为

  用户数据：{}

  然后删除 并且在登录时检查 id 和 email 是否存在是 userData 使用 hasProperty 方法 if Js

• 可存储和处理（使用您在 react 中编写的 js util）更多属性（可能是会话存储或服务器验证等）的受控用户信息

• 加密所有用户数据，如果你喜欢那种安全的东西

我希望我为您提供了一种以系统方式处理和解决问题的方法:-)

还记得检查cookie是否不存在然后将其设置为空白。

Answer 2

注销时，您正在删除 cookie，但不会更新 Redux 状态。
从 redux 状态中移除 email 和 id。

但更好的方法是将整个熟管理移到reducer：

即

• reducer 应该通过检查 cookie 来设置初始状态
• 在LOGIN 操作上，reducer 除了更新状态外还应该设置 cookie
• 在 LOGOUT 操作中，reducer 除了更新状态外，还应该删除 cookie

您的其余代码应仅从 redux 状态检查登录状态。
这样，您将拥有单一的事实来源。