Question

我正在编写一个React App，可以访问某些Admin页面。在闲置15分钟后，我使用react-idle-timer强制重定向到主页。那很好。除非系统进入睡眠状态。然后该代码似乎可以正常工作（根据控制台），但是Chrome标签在上一次渲染时冻结，并且无法关闭。我们也无法关闭浏览器（除非强制退出）。

用户状态链接到存储在cookie中的会话ID。 Cookie的寿命为30分钟。如果发生这种情况，将在下一个数据库调用中发生重定向。

因此，自动会话断开过程是：在管理页面中闲置1至15分钟，或者在无数据库调用的情况下闲置30分钟。 2-清除会话cookie。 3-修改数据库中的会话状态。 4-从数据库中获取新的会话数据。 5-重定向到首页。

尽管操作系统已断开与互联网的连接，但我还是使用了navigator.onLine来告诉我是否仍处于连接状态。看来我仍然保持联系。

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import IdleTimer from 'react-idle-timer';
import wakeEvent from 'wake-event';

import { readSessionId, readSessionIdDate } from './cookieUtils';

class AdminLayout extends React.Component {
  constructor(props) {
    super(props);

    this.idleTimer = null;
    this._15minutes = 1000 * 60 * 15
    this.sessionId = readSessionId();
  }

  onIdle = () => {
    if(typeof navigator !== 'undefined' && navigator.onLine) { 
      const
        now = new Date(),
        sessionIdDate = readSessionIdDate(),
        date = sessionIdDate ? new Date(sessionIdDate) : null;

      if(!date || (now - date) > this._15minutes) {
        this.idleTimer.pause();
        this.props.logout();
      }
    } else {
      this.idleTimer.pause();
      wakeEvent(() => {
        const 
          now = new Date(),
          sessionId = readSessionId(),
          sessionIdDate = readSessionIdDate(),
          date = sessionIdDate ? new Date(sessionIdDate) : null;

        if(sessionId === this.sessionId) {
          if(!date || (now - date) > this._15minutes) {
            this.props.logout();
          }
        } else {
          this.props.history.push(`/`)
        }
      });
    }
  };

  render() {
    return (
      <div class="AdminLatout">
        <IdleTimer
          ref={ref => { this.idleTimer = ref }}
          element={document}
          onIdle={onIdle}
          debounce={250}
          timeout={_15minutes}
        />
        <div>
          {content}
        </div>
      </div>
    )
  }
}

export default AdminLayout;

React App应该重定向到主页。无论是在睡眠模式下还是在唤醒事件中。

为什么在睡眠模式下重定向React App时，Chrome标签页会冻结？

0 个答案: