如何在session token过期后实现强制登出？

核心思路：基于Token过期时间设置定时器 #

不管是JWT还是普通会话Token，只要能拿到它的过期时间，就可以计算出剩余有效期，用setTimeout在到期时自动触发登出逻辑。同时要处理Token刷新、后台提前失效的场景，避免漏判。

1. 解析Token的过期时间（以JWT为例） #

JWT的payload里自带exp字段（过期时间戳，单位秒），解码后就能拿到：

// 解码JWT的payload部分
function parseToken(token) {
  try {
    const payloadBase64 = token.split('.')[1];
    return JSON.parse(atob(payloadBase64));
  } catch (err) {
    console.error('Token解析失败:', err);
    return null;
  }
}

// 页面加载时初始化定时器
const token = localStorage.getItem('sessionToken');
if (token) {
  const payload = parseToken(token);
  if (payload?.exp) {
    const expireMs = payload.exp * 1000; // 转成毫秒
    const currentMs = Date.now();
    const timeLeft = expireMs - currentMs;

    if (timeLeft > 0) {
      // 设置到期登出定时器
      window.logoutTimer = setTimeout(() => {
        localStorage.removeItem('sessionToken');
        window.location.href = '/login';
      }, timeLeft);
    } else {
      // Token已过期，直接登出
      localStorage.removeItem('sessionToken');
      window.location.href = '/login';
    }
  }
}

2. Token刷新时重置定时器 #

如果用户操作过程中刷新了Token（比如请求接口时返回新Token），要清除旧定时器，重新计算有效期：

// 刷新Token后调用此函数重置定时器
function resetLogoutTimer(newToken) {
  // 清除旧定时器
  if (window.logoutTimer) {
    clearTimeout(window.logoutTimer);
  }

  // 解析新Token并设置新定时器
  const payload = parseToken(newToken);
  if (payload?.exp) {
    const expireMs = payload.exp * 1000;
    const timeLeft = expireMs - Date.now();
    if (timeLeft > 0) {
      window.logoutTimer = setTimeout(() => {
        localStorage.removeItem('sessionToken');
        window.location.href = '/login';
      }, timeLeft);
    }
  }
}

3. 处理后台主动失效的兜底场景 #

有时候Token可能被后台提前注销（比如管理员手动踢人），这时候定时器不会触发，但用户发起请求会返回401，要在请求拦截器里处理：

// 以Axios为例，响应拦截器捕获401
axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 401) {
      // 清除定时器，避免重复登出
      if (window.logoutTimer) clearTimeout(window.logoutTimer);
      // 强制登出
      localStorage.removeItem('sessionToken');
      window.location.href = '/login';
    }
    return Promise.reject(err);
  }
);

关键注意点 #

• 时间偏差问题：客户端本地时间可能和服务器不一致，建议登录时让服务器返回当前时间戳，用这个时间来计算剩余有效期，避免定时器提前或延迟触发。
• 页面刷新/关闭：定时器会被清除，所以每次页面加载都要重新检查Token状态并初始化定时器。
• 非JWT场景：如果是普通session，登录时让服务器返回session的过期时长（比如3600秒），直接用这个时长设置定时器即可。

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