OIDC：浏览器窗口/标签页闲置约一天时的访问令牌过期问题

核心问题分析 #

Chrome会对长时间闲置的窗口/标签页进行资源限制，暂停定时器执行，导致定期刷新token的逻辑中断，最终触发API未授权错误。由于认证服务器不支持refresh token，且refresh token自身也有有效期，无法从根本解决长期闲置问题，需从浏览器行为适配和认证逻辑优化入手。

可行解决方案 #

1. 利用Visibility API恢复刷新逻辑 #

监听窗口可见性变化，当窗口从隐藏变为可见时，立即检查token状态并按需刷新：

// 初始化OIDC用户管理器
const userManager = new Oidc.UserManager({ /* 你的OIDC配置 */ });

// 监听窗口可见性切换
document.addEventListener('visibilitychange', async () => {
  if (document.visibilityState === 'visible') {
    const user = await userManager.getUser();
    if (!user) {
      // 无有效用户，引导登录
      userManager.signinRedirect();
      return;
    }

    // 计算token剩余有效期（秒）
    const expiresIn = user.expires_at - Math.floor(Date.now() / 1000);
    // 剩余时间不足5分钟则立即刷新
    if (expiresIn < 300) {
      try {
        const updatedUser = await userManager.signinSilent();
        // 更新应用内的token存储
      } catch (err) {
        // 静默刷新失败，引导用户重新登录
        userManager.signinRedirect();
      }
    }
  }
});

2. 拦截API错误，无感知重试刷新 #

当API返回401未授权错误时，优先尝试静默刷新token，而非直接重载页面：

async function authenticatedFetch(url, options = {}) {
  const user = await userManager.getUser();
  let accessToken = user?.access_token;

  // 首次请求前检查token状态
  if (!user || user.expired) {
    try {
      const updatedUser = await userManager.signinSilent();
      accessToken = updatedUser.access_token;
    } catch (err) {
      userManager.signinRedirect();
      return Promise.reject(err);
    }
  }

  // 携带token发起请求
  const authOptions = {
    ...options,
    headers: {
      ...options.headers,
      'Authorization': `Bearer ${accessToken}`
    }
  };

  const response = await fetch(url, authOptions);

  // 若返回401，再次尝试刷新token并重试请求
  if (response.status === 401) {
    try {
      const updatedUser = await userManager.signinSilent();
      authOptions.headers['Authorization'] = `Bearer ${updatedUser.access_token}`;
      return fetch(url, authOptions);
    } catch (err) {
      userManager.signinRedirect();
      return Promise.reject(err);
    }
  }

  return response;
}

3. 优化定时器策略，降低被暂停概率 #

• 不要使用固定30分钟的长周期定时器，改为基于token过期时间动态计算刷新间隔（比如在token过期前10分钟触发刷新）
• 缩短定时器的检测周期（比如每5分钟检查一次token状态），结合可见性检测，减少因Chrome资源限制导致的任务中断

4. 借助Service Worker后台同步（进阶方案） #

使用浏览器的Background Sync API，将token刷新任务注册为后台同步事件，即使页面处于闲置状态，浏览器也会在资源允许时执行该任务。需要配合Service Worker实现：

1. 注册Service Worker
2. 在token即将过期时，注册同步事件
3. 在Service Worker中监听同步事件，执行token刷新逻辑

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