在 Express 和 React 之间共享会话答案

【问题标题】：Share session between Express and React在 Express 和 React 之间共享会话
【发布时间】：2022-01-24 20:16:50
【问题描述】：

我有一个使用 node/Express 构建的 Web 应用程序，其中包括后端和前端。现在我将前端移动到一个 React 应用程序，一次一页。

我正在尝试找到一种方法来在两个应用程序之间维护一个共享购物车，以便用户可以从 Express 页面添加项目 A 和 B，并从 React 页面添加项目 C。购物车存储在会话中，但显然这两个应用程序具有不同的会话（当在 Express 后端我 console.log sessionID 时，React 的请求与 Express 请求具有不同的 sessionID）。

这是我尝试过的，假设 Express 有 sessionID 111 和 React sessionID 222

用户在 Express 页面上
当他进入 React 页面时，Express 会在 URL 中或作为参数发送当前 sessionID (111)
React 使用该 sessionID 调用 /setSession 端点，因此 Express 查找会话 111 并将购物车项目复制到会话 222 上

现在 React 会话包含与 Express 会话相同的购物车项目，耶！问题是如果我现在在 React 页面中添加项目，Express 不会知道。我必须执行与上述类似的操作，才能将会话数据发送回 Express。

我可以这样做，但是 A) 它看起来很复杂，B) 如果用户在两个选项卡中打开了两个应用程序，它将无法工作，在 Express 上添加的项目不会更新 React 选项卡（反之亦然）。

所以我希望 Express 和 React 共享同一个会话或其中的一部分，但老实说，我迷路了！我知道规则应该是“一个会话，一个客户”，但我想有一个简单的方法来实现它..

【问题讨论】：

您是否尝试从您的反应应用程序调用您的快速后端来确定会话，而不是使用 url 参数？在我看来，使用 url 参数似乎很不安全。
是的@JasperBernales，如果我正确理解您所说的确定会话的意思，我已经尝试过了，React 会话与 Express 会话不同。因此，如果我在 Express 页面中添加项目 A 和 B，并在 React 页面中添加项目 C，我最终会得到两个会话，而不是一个包含项目 A B 和 C 的购物车。

标签： node.js reactjs express session

【解决方案1】：

我认为您可以做的是，当您从 express 转到您的 react 应用程序时，例如使用您的身份验证令牌为您的 react 应用程序设置一个 cookie。然后使用身份验证令牌，您可以获得会话详细信息。我能够处理这样的事情，我正在使用 redis https://redis.com/solutions/use-cases/session-management/

【讨论】：

是的，在 react 应用程序中我已经使用 JWT 实现了身份验证，但问题仍然是相同的：即使在两个应用程序中登录了相同的使用，React 的会话也与 Express 不同。因此，如果我在 Express 页面中添加项目 A 和 B，然后转到 React 页面并添加项目 C，我有两个单独的会话，一个包含项目 A 和 B，一个包含项目 C。