如何用Vanilla JavaScript实现登录状态监视器

登录状态监视器是前端应用中用于实时追踪用户登录状态变化的功能模块，使用Vanilla JavaScript实现该模块可以避免引入额外的框架依赖，适配更多轻量化的项目场景。我们可以通过监听存储变化、定时校验凭证有效性等方式，实现登录状态的实时监测与响应。

核心实现思路

登录状态监视器的核心逻辑包含三个部分：登录凭证的存储、状态变化的监听、凭证有效性的校验。通常我们会使用localStorage存储用户的登录令牌，通过监听storage事件捕获其他标签页的状态变化，同时设置定时任务校验令牌是否过期。

1. 登录凭证存储

用户登录成功后，将后端返回的令牌和过期时间存入localStorage，后续所有状态判断都基于该存储内容。

// 用户登录成功后存储凭证
function saveLoginCredential(token, expireTime) {
  const credential = {
    token: token,
    expireTime: expireTime // 时间戳，单位毫秒
  };
  localStorage.setItem('login_credential', JSON.stringify(credential));
}

// 获取当前存储的凭证
function getLoginCredential() {
  const credentialStr = localStorage.getItem('login_credential');
  if (!credentialStr) return null;
  try {
    return JSON.parse(credentialStr);
  } catch (e) {
    return null;
  }
}

2. 状态变化监听

浏览器同一个域下的不同标签页共享localStorage，因此可以通过监听storage事件捕获其他标签页的登录、登出操作，实现多标签页状态同步。

// 监听localStorage变化，同步登录状态
function initStorageListener() {
  window.addEventListener('storage', (event) => {
    if (event.key === 'login_credential') {
      // 凭证发生变化，触发状态更新
      const newCredential = event.newValue ? JSON.parse(event.newValue) : null;
      handleLoginStateChange(newCredential);
    }
  });
}

3. 令牌过期校验

除了监听存储变化，还需要定时校验存储的令牌是否过期，避免用户长期使用过期凭证操作。

// 定时校验令牌有效性
let checkTimer = null;
function startCredentialCheck(interval = 60000) {
  // 先执行一次校验
  checkCredentialValidity();
  // 设置定时校验
  checkTimer = setInterval(() => {
    checkCredentialValidity();
  }, interval);
}

function checkCredentialValidity() {
  const credential = getLoginCredential();
  if (!credential) {
    // 无凭证，已登出
    handleLoginStateChange(null);
    return;
  }
  const now = Date.now();
  if (now > credential.expireTime) {
    // 令牌过期，清除存储并触发登出
    localStorage.removeItem('login_credential');
    handleLoginStateChange(null);
  }
}

状态变化处理函数

当检测到登录状态变化时，需要统一处理后续逻辑，比如更新页面UI、跳转路由、拦截未授权操作等。

// 处理登录状态变化
function handleLoginStateChange(credential) {
  if (credential) {
    // 登录状态
    console.log('用户已登录');
    // 更新页面登录按钮为用户名
    const loginBtn = document.getElementById('login-btn');
    if (loginBtn) {
      loginBtn.textContent = '已登录';
      loginBtn.disabled = true;
    }
  } else {
    // 登出状态
    console.log('用户未登录或已登出');
    // 更新页面登录按钮
    const loginBtn = document.getElementById('login-btn');
    if (loginBtn) {
      loginBtn.textContent = '登录';
      loginBtn.disabled = false;
    }
    // 如果是需要登录的页面，跳转至登录页
    const needAuthPages = ['/user-center', '/order-list'];
    const currentPath = window.location.pathname;
    if (needAuthPages.includes(currentPath)) {
      window.location.href = '/login';
    }
  }
}

完整初始化流程

将以上逻辑整合，在页面加载完成后初始化监视器即可。

// 初始化登录状态监视器
function initLoginStateMonitor() {
  // 初始化存储监听
  initStorageListener();
  // 启动令牌过期校验
  startCredentialCheck();
  // 初始状态判断
  const initCredential = getLoginCredential();
  handleLoginStateChange(initCredential);
}

// 页面加载完成后执行初始化
window.addEventListener('DOMContentLoaded', initLoginStateMonitor);

注意事项

• localStorage存储的数据可以被用户手动修改，因此敏感操作需要后端再次校验令牌有效性，前端校验仅用于提升用户体验。
• storage事件只在其他标签页修改localStorage时触发，当前标签页的修改不会触发该事件，因此当前页的登出操作需要手动调用状态处理函数。
• 如果项目需要支持跨域状态同步，需要额外通过postMessage或者后端接口同步状态，localStorage仅支持同域共享。

Vanilla_JavaScript登录状态监视器前端状态管理localStorage修改时间：2026-06-19 13:15:28