在 React 中存储 Express 会话 ID答案

【问题标题】：Storing Express session Id in React在 React 中存储 Express 会话 ID
【发布时间】：2019-11-11 23:50:30
【问题描述】：

我在理解使用 Express session(backend) + React(frontend) 进行身份验证的步骤时遇到了问题。当用户登录服务器时，使用用户 id 设置会话 cookie 对象，这样它就可以识别用户是否登录...

客户端呢？当用户登录并生成一个令牌时，我将其发送回 react 应用程序并将其保存在 localStorage 中以用于我发出的每个请求稍后？我听说这是不安全的......所以我问你我应该如何实现它？如何保存从服务器获取的令牌以在以后发出请求时使用它？我能想到的一种方法是在服务器端发出另一个 get 请求，该请求返回 session.userId，这样我就可以看到那是否为真，然后用户已登录......我只是想弄清楚如何实现它

谢谢！

【问题讨论】：

考虑使用 JWT 来持久化用户会话。关于为什么认为 JWT 安全的问答：stackoverflow.com/questions/27301557/…。
是的，我明白……但这不是我的问题。将其保存为 jwt 后，我应该如何传递/存储它以做出反应，以便应用程序可以使用它在我发出的下一个请求中发送令牌？@rishat

标签： node.js reactjs express

【解决方案1】：

浏览器实现 cookie 存储，您无需在客户端执行任何显式操作来维护快速会话。当身份验证第一次发生时，服务器向客户端发送一个标头，指示它存储一个 cookie，浏览器将保留该 cookie 并在所有后续请求中将其发送回。这些都不需要在客户端脚本（即您的 javascript 代码）中发生。

您不需要将 cookie 存储在本地存储中，通常不应该，会话 cookie 将是“httponly”，这意味着客户端脚本被禁止访问它们。这是为了在 XSS 的情况下减少会话窃取的可能性。

【讨论】：

但是如果我将此 cookie 配置为仅在服务器端呢？此配置 - cookie.httpOnly 指定 HttpOnly Set-Cookie 属性的布尔值。如果为真，则设置 HttpOnly 属性，否则不设置。默认情况下，设置了 HttpOnly 属性。请注意，将此设置为 true 时要小心，因为兼容的客户端不允许客户端 JavaScript 看到 document.cookie 中的 cookie。取自官方：npmjs.com/package/express-session@Ryan Jenkins
所以你还说我不能像我一样从反应中访问这个会话cookie...如果我没有令牌，我该如何设置带有正确令牌的请求头？ @瑞安詹金斯
@hindi1991 回复：您的最后一条评论，浏览器会自动为您设置Cookie 标头，您一般不需要手动指定要发送的cookie。此外，HttpOnly 属性并不意味着“仅限服务器端”，HttpOnly cookie 是由浏览器管理的 cookie，客户端脚本无法访问，但它们仍会在浏览器和服务器之间自动发送。
感谢您的回答，但我仍然遇到问题...如果由于用户是否登录而需要呈现不同的链接怎么办...我需要一个正确的变量或 false 或任何其他表明我已登录的标识符...登录后如何获取和使用它？ @瑞安詹金斯
您可以存储一些值来指示用户是否登录，它不需要是会话ID。您可以在身份验证成功时设置该值，只需确保包含在注销或会话到期时取消设置的逻辑（可能检测会话到期的最可靠方法是请求因此失败）