js怎么判断是否登录

JavaScript 判断是否登录的方法包括：检查 Cookie、检查 Local Storage、使用 Session Storage、验证 JWT (JSON Web Token)。 其中，通过检查 Cookie 的方法最为常见，我们可以通过读取用户的 Cookie 来判断用户是否已经登录。下面我们将详细讲解这一方法。

一、检查 Cookie

1.1 获取 Cookie

Cookie 是一种存储在用户浏览器上的小型文本文件，通常用于保存用户会话信息。通过检查 Cookie 是否存在，我们可以判断用户是否已经登录。以下是一个基本的获取 Cookie 的 JavaScript 函数：

function getCookie(name) {
  let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
  return null;
}

1.2 判断登录状态

通过获取特定的 Cookie 值，例如 session_id 或 auth_token，我们可以判断用户是否已经登录：

function isLoggedIn() {
  return getCookie('auth_token') !== null;
}
if (isLoggedIn()) {
  console.log('User is logged in');
} else {
  console.log('User is not logged in');
}

二、检查 Local Storage

2.1 设置和获取 Local Storage

Local Storage 是浏览器提供的一种本地存储机制，可以在客户端存储数据。我们可以将用户的登录状态保存在 Local Storage 中：

// 设置 Local Storage
localStorage.setItem('isLoggedIn', 'true');
// 获取 Local Storage
function isLoggedIn() {
  return localStorage.getItem('isLoggedIn') === 'true';
}
if (isLoggedIn()) {
  console.log('User is logged in');
} else {
  console.log('User is not logged in');
}

2.2 使用场景

使用 Local Storage 判断登录状态适用于需要在多个页面之间共享登录状态的情况，但要注意 Local Storage 的数据是持久化的，用户手动清除浏览器数据会导致状态丢失。

三、使用 Session Storage

3.1 设置和获取 Session Storage

Session Storage 类似于 Local Storage，但它只在页面会话期间有效。关闭页面或浏览器后，数据将被清除：

// 设置 Session Storage
sessionStorage.setItem('isLoggedIn', 'true');
// 获取 Session Storage
function isLoggedIn() {
  return sessionStorage.getItem('isLoggedIn') === 'true';
}
if (isLoggedIn()) {
  console.log('User is logged in');
} else {
  console.log('User is not logged in');
}

3.2 使用场景

Session Storage 适用于需要在单个会话中保存登录状态的情况，例如单页应用（SPA）或用户在浏览器中打开多个页面标签的场景。

四、验证 JWT (JSON Web Token)

4.1 什么是 JWT

JWT 是一种用于身份验证的紧凑且 URL 安全的令牌。它通常由服务器生成，并在用户登录后发送到客户端。客户端可以在请求中附加 JWT 来验证用户身份。

4.2 解码和验证 JWT

可以使用 JavaScript 库（如 jwt-decode）来解码和验证 JWT：

// 安装 jwt-decode 库
// npm install jwt-decode
const jwt_decode = require('jwt-decode');
function isLoggedIn() {
  const token = localStorage.getItem('auth_token');
  if (!token) return false;
  try {
    const decoded = jwt_decode(token);
    // 检查 token 是否过期
    const currentTime = Date.now() / 1000;
    if (decoded.exp < currentTime) {
      return false;
    }
    return true;
  } catch (e) {
    return false;
  }
}
if (isLoggedIn()) {
  console.log('User is logged in');
} else {
  console.log('User is not logged in');
}

4.3 使用场景

JWT 适用于需要跨多个系统或服务共享身份验证状态的场景。它在单页应用和移动应用中尤为常见。

五、结合项目管理系统

在实际开发中，判断用户是否登录常常与项目管理系统结合。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些系统提供了丰富的 API 和插件，可以帮助开发者更方便地管理用户登录状态和权限。

5.1 使用 PingCode

PingCode 提供了强大的项目管理功能和灵活的 API，可以帮助开发者管理用户登录状态和项目权限：

// 使用 PingCode API 检查用户登录状态
async function checkLoginStatus() {
  try {
    const response = await fetch('https://api.pingcode.com/user/status', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
        'Content-Type': 'application/json'
      }
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data.loggedIn;
  } catch (error) {
    console.error('Error checking login status:', error);
    return false;
  }
}
checkLoginStatus().then(isLoggedIn => {
  if (isLoggedIn) {
    console.log('User is logged in');
  } else {
    console.log('User is not logged in');
  }
});

5.2 使用 Worktile

Worktile 是一款通用的项目协作软件，也提供了丰富的 API，方便开发者管理用户的登录状态和项目协作：

// 使用 Worktile API 检查用户登录状态
async function checkLoginStatus() {
  try {
    const response = await fetch('https://api.worktile.com/user/status', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
        'Content-Type': 'application/json'
      }
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data.loggedIn;
  } catch (error) {
    console.error('Error checking login status:', error);
    return false;
  }
}
checkLoginStatus().then(isLoggedIn => {
  if (isLoggedIn) {
    console.log('User is logged in');
  } else {
    console.log('User is not logged in');
  }
});

以上就是使用 JavaScript 判断用户是否登录的几种常见方法及其应用场景。通过结合项目管理系统，可以更好地管理用户的登录状态和权限，提升开发效率和用户体验。