使用 react.js 使用服务器端渲染在页面刷新后保持会话活动

Question

尽管不确定这是否是一个特定于 React 的问题：

我们正在使用 react/redux 堆栈和服务器端渲染来开发和应用程序。用户登录后，我们会收到两个 cookie，一个用于身份，一个用于浏览器中的会话（具有过期日期）。问题是当用户刷新页面时，状态正在重置，我们丢失了会话信息（我们基本上在状态中设置了一些变量来指示用户已登录）。

问题是如何管理这种情况并使用户即使在刷新页面时也保持登录状态。我正在考虑将服务器端呈现完全排除在图片之外，并在最初呈现页面时在客户端检查未过期的会话 ID cookie，如果会话仍然存在，则在状态中设置一些变量，反之亦然-反之亦然。

这看起来是一种安全的方法吗？有更好的方法吗？

Answer 1

我遇到了类似的问题。如果可以的话，我个人认为检查 cookie 并在 UI 会话上重新注册没有任何问题。服务器仍由适当的 cookie 保护。

然而，在我的例子中，我无法通过 JS 检查 cookie，因为它们被设置为 http-only。最后我不得不采用以下解决方案：

当用户首次成功登录时创建一个'sessionStorage'实例以表明有一个活动会话：

window.sessionStorage.setItem(sessionKey, stringifiedUserToken);

如果页面刷新，则检查此会话项目并重新注册活动会话：

const activeSession = window.sessionStorage.getItem(sessionKey);
if (activeSession) {
  // fire register user session action
}

如果用户注销，则终止会话存储令牌。

所有服务器交互仍然需要传递的 cookie，因此这纯粹是前端问题。

会话存储将在浏览器会话结束时清除，因此这种天真的方法可能不适用于 "permanent" 会话。它确实有很好的浏览器支持：http://caniuse.com/#search=sessionStorage

Keeping session alive after page refresh with server side rendering using react.js