在 React SPA 中的多个选项卡之间处理会话和空闲计时器答案

【问题标题】：Handling Sessions & Idle Timer between multiple tabs in React SPA在 React SPA 中的多个选项卡之间处理会话和空闲计时器
【发布时间】：2021-03-13 17:24:33
【问题描述】：

我正在开发一个具有会话持续时间的用户身份验证的 React 应用程序。登录时，响应将提供与 userObject 的会话持续时间。我在 localStorage 中使用 redux-persist 持久化日志用户对象。我使用 react-idle-timer 来检测带有 sessionDuration 的选项卡空闲，我正在记录用户对象中。当用户空闲达到超时时，我将清除本地存储结果用户注销。

这是我面临的问题：

流程完全适用于单个选项卡。当用户使用多个选项卡时。例如，我在第二个选项卡中打开一个页面，loggedUser 数据将使用 localStorage 共享，这里我正在积极使用该页面。但是第一个选项卡空闲，当持续时间超过第一个选项卡时，将通过清除 localStorage 注销，主动使用第二个选项卡的用户将被强制注销，因为没有记录的用户数据（localStorage）。

如何处理？

【问题讨论】：

检查这是否对您有帮助 - blog.guya.net/2015/06/12/…

标签： javascript reactjs react-redux

【解决方案1】：

是的...一开始我也面临同样的问题。亲爱的，你并不孤单。只需在代码中添加crossTab 属性即可解决您的问题。

<div>
  <IdleTimer
    crossTab={true}
    ref={idleTimerRef}
    timeout={1000 * 60 * sessionTimeoutPeriod}
    onIdle={onIdle}></IdleTimer>
</div>

【讨论】：

【解决方案2】：

您可以将 IdleTimer 组件中的 crossTab 属性设置为 true。

<IdleTimer
  crossTab={true}
  ref={idleLogoutRef}
  timeout={timeOutLogin * 60 * 1000}
  onIdle={logoutUser}
  onActive={stayActive}
></IdleTimer>

【讨论】：