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

Question

虽然不确定这是否是特定于反应的问题:

我们正在使用带有服务器端渲染的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，因此这纯粹是前端的问题。

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