javascript - 使用 react.js 通过服务器端渲染在页面刷新后保持 session 事件

标签 javascript reactjs server-side-rendering

虽然不确定这是否是一个特定于 React 的问题:

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

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

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

最佳答案

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

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


当用户第一次登录成功时创建一个'sessionStorage'实例来表明有一个活跃的 session :

window.sessionStorage.setItem(sessionKey, stringifiedUserToken);

如果页面刷新,则检查此 session 项并重新注册事件 session :

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

如果用户注销,则终止 session 存储 token 。


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

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

关于javascript - 使用 react.js 通过服务器端渲染在页面刷新后保持 session 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37544203/

相关文章:

javascript - 找到 rowspan 然后检查第一个单元格是否有文本?

javascript - Angularjs ng-disabled 不起作用

javascript - 如何实现使用 API 获取信息的搜索栏

reactjs - 如何使用 ReactJS.NET 通过 redux 渲染 React 应用程序?

reactjs - 如何在 React SSR(服务器端渲染)中使用样式加载器?

javascript - 乘以嵌套数组长度并返回单个值

javascript - 如何获取datatables中数据的 'id'来显示update form中的数据?

javascript - 页面加载时的多个异步调度会出现错误?

javascript - 如何在 vue/nuxt 中结合 ssr 根据屏幕尺寸有条件地正确渲染 html

reactjs - 热模块重新加载不适用于我的 nextjs 应用程序