当前位置：首页 > JavaScript

js实现logout

2026-02-01 18:11:35JavaScript

实现用户登出的 JavaScript 方法

在 Web 应用中实现登出功能通常涉及清除用户会话、令牌或重定向到登录页面。以下是几种常见的实现方式：

清除本地存储的认证信息

function logout() {
  localStorage.removeItem('authToken');
  sessionStorage.removeItem('userData');
  window.location.href = '/login';
}

发送登出请求到后端

async function logout() {
  try {
    const response = await fetch('/api/logout', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    });

    if (response.ok) {
      localStorage.clear();
      window.location.replace('/login');
    }
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

处理基于 Cookie 的会话

function logout() {
  document.cookie = 'sessionId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
  window.location.reload();
}

使用框架特定的方法（如 React）

const handleLogout = () => {
  // 清除状态管理中的用户数据
  setUser(null);
  // 清除存储
  localStorage.removeItem('token');
  // 导航到登录页
  navigate('/login');
};

完整的安全登出实现

js实现logout

async function secureLogout() {
  // 撤销刷新令牌
  await fetch('/api/revoke-refresh-token', {
    method: 'POST',
    credentials: 'include'
  });

  // 清除所有认证相关数据
  localStorage.removeItem('access_token');
  localStorage.removeItem('refresh_token');
  document.cookie.split(';').forEach(c => {
    document.cookie = c.replace(/^ +/, '')
      .replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`);
  });

  // 清除缓存
  if ('caches' in window) {
    caches.keys().then(names => {
      names.forEach(name => caches.delete(name));
    });
  }

  // 重定向到登录页
  window.location.href = '/login?logout=success';
}