React-idle-timer会话过期异常：仅屏幕打开时触发，关闭时不生效

问题核心：浏览器为节省资源，会限制后台标签页或关闭屏幕时的定时器运行，导致react-idle-timer默认的DOM事件监听和定时器无法正常触发闲置超时。

方案1：通过页面可见性事件修正闲置时间 #

监听页面visibilitychange事件，在页面从后台切回前台时，计算后台停留时长并手动更新最后活跃时间，确保闲置计算准确。

修改后的代码：

import { useIdleTimer } from 'react-idle-timer';
import { useState, useRef } from 'react';

const YourComponent = () => {
  const [isLogin, setIsLogin] = useState(true);
  const idleTimerRef = useRef(null);
  const lastHiddenTime = useRef(Date.now());

  const handleOnIdle = () => {
    console.log('用户已闲置');
    localStorage.removeItem("HotelCode");
    setIsLogin(false);
  };

  const handleVisibilityChange = () => {
    const now = Date.now();
    if (document.visibilityState === 'visible') {
      // 计算后台停留时长，更新最后活跃时间
      const hiddenDuration = now - lastHiddenTime.current;
      idleTimerRef.current?.setLastActiveTime(now - hiddenDuration);
    }
    lastHiddenTime.current = now;
  };

  useIdleTimer({
    timeout: 1000 * 60 * SESSION_IDEL_MINUTES,
    onIdle: handleOnIdle,
    debounce: 500,
    ref: idleTimerRef,
    // 新增页面可见性事件
    events: ['mousemove', 'keydown', 'mousedown', 'touchstart', 'visibilitychange'],
    onVisibilityChange: handleVisibilityChange
  });

  return (
    // 组件内容
  );
};

方案2：强制后台定时器运行 #

使用forceTimer选项（需react-idle-timer版本支持）强制定时器在后台持续运行，代价是增加后台资源消耗：

const { getLastActiveTime } = useIdleTimer({
  timeout: 1000 * 60 * SESSION_IDEL_MINUTES,
  onIdle: handleOnIdle,
  debounce: 500,
  forceTimer: true // 启用强制定时器
});

重要提醒 #

• 浏览器的后台限制是性能优化策略，无法完全规避，前端逻辑仅作辅助，建议后端同时设置会话过期时间，保障安全。
• forceTimer可能导致后台页面占用更多CPU，需根据业务场景评估使用。

内容的提问来源于stack exchange，提问作者Ihtisham