React中基于Axios API请求的无活动会话过期警告实现咨询

针对你的需求，核心思路是通过全局Axios拦截器共享会话活跃状态，结合sessionStorage实现多标签页状态同步，再通过自定义Hook处理组件内的计时与状态更新。以下是具体实现方案：

1. 全局注册Axios请求拦截器 #

将拦截器从组件的useEffect中抽离，全局注册一次，确保所有API请求都能更新会话活跃时间：

// api.js
import axios from 'axios';

const apiInstance = axios.create({ baseURL: '/your-api-base-url' });

// 请求拦截器：更新会话活跃时间到sessionStorage，并通知当前页组件
apiInstance.interceptors.request.use(
  (config) => {
    // 记录最后一次API请求的时间戳
    const lastActiveTime = Date.now().toString();
    sessionStorage.setItem('lastApiRequestTime', lastActiveTime);
    // 触发自定义事件，通知当前页组件重置计时
    window.dispatchEvent(new CustomEvent('sessionActiveUpdated'));
    return config;
  },
  (error) => Promise.reject(error)
);

export default apiInstance;

2. 封装自定义Hook处理超时逻辑 #

创建useSessionIdle Hook，统一处理计时、多标签页状态同步：

// hooks/useSessionIdle.js
import { useState, useEffect, useRef } from 'react';

// 会话超时阈值（可根据业务调整，示例为10秒）
const SESSION_TIMEOUT = 10000;

export const useSessionIdle = () => {
  const [isIdle, setIsIdle] = useState(false);
  const timerRef = useRef(null);

  // 重置超时计时的通用函数
  const resetTimer = () => {
    if (timerRef.current) clearTimeout(timerRef.current);
    setIsIdle(false);
    timerRef.current = setTimeout(() => setIsIdle(true), SESSION_TIMEOUT);
  };

  useEffect(() => {
    // 初始化：从sessionStorage读取上次活跃时间，计算剩余超时时间
    const initLastActive = sessionStorage.getItem('lastApiRequestTime');
    if (initLastActive) {
      const elapsed = Date.now() - parseInt(initLastActive, 10);
      if (elapsed < SESSION_TIMEOUT) {
        timerRef.current = setTimeout(() => setIsIdle(true), SESSION_TIMEOUT - elapsed);
      } else {
        setIsIdle(true);
      }
    } else {
      resetTimer();
    }

    // 监听当前页的自定义事件（处理自身请求触发的状态更新）
    const handleLocalUpdate = () => resetTimer();
    window.addEventListener('sessionActiveUpdated', handleLocalUpdate);

    // 监听storage事件（处理其他标签页的状态同步）
    const handleCrossTabUpdate = (e) => {
      if (e.key === 'lastApiRequestTime') resetTimer();
    };
    window.addEventListener('storage', handleCrossTabUpdate);

    // 组件卸载时清理事件监听与定时器
    return () => {
      window.removeEventListener('sessionActiveUpdated', handleLocalUpdate);
      window.removeEventListener('storage', handleCrossTabUpdate);
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);

  return { isIdle };
};

3. 在组件中使用Hook #

直接在需要展示超时通知的组件中引入自定义Hook：

// components/SessionWarning.js
import { useSessionIdle } from '../hooks/useSessionIdle';

export const SessionWarning = () => {
  const { isIdle } = useSessionIdle();

  return (
    isIdle && (
      <div className="session-warning">
        *您的会话即将过期，请发起新请求保持活跃*
      </div>
    )
  );
};

方案说明 #

• 多标签页同步：通过sessionStorage共享最后活跃时间，其他标签页可通过storage事件感知更新；当前页则通过自定义事件触发状态同步（因为storage事件仅在跨标签页时触发）。
• 全局拦截器：确保所有API请求都能触发会话活跃时间更新，无需在每个组件中重复处理。
• 初始化兼容：页面刷新时会读取sessionStorage中的历史活跃时间，避免计时重置。

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