如何检查用户是否登录 JavaScript

在 web 开发中，我们通常需要判断用户是否已经登录。JavaScript 可以轻松实现这个功能。本文将介绍一些检查用户是否登录的方法。

使用 cookie

使用 cookie 可以存储用户登录状态，当用户打开网站时，检查 cookie 是否存在，从而知道用户是否已登录。以下是一个基本的示例：

// 设置 cookie
document.cookie = "username=john; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// 检查 cookie
function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("欢迎 " + user + " 再次访问！");
  } else {
    alert("请登录！");
  }
}

function getCookie(name) {
  var cookieArr = document.cookie.split(";");
  for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return "";
}

以上代码将 username 设置为 john，并设置了过期时间和路径。getCookie() 函数可以获取 cookie 的值，checkCookie() 函数用于检查用户是否登录。

使用 Local Storage 或 Session Storage

Local Storage 和 Session Storage 可以用于存储较大的数据，当用户退出浏览器后，Local Storage 数据依然存在，Session Storage 数据将被删除。

以下是一个基本的示例：

// 设置 Local Storage
localStorage.setItem("username", "john");

// 检查 Local Storage
function checkLocalStorage() {
  var user = localStorage.getItem("username");

  if (user != null) {
    alert("欢迎 " + user + " 再次访问！");
  } else {
    alert("请登录！");
  }
}

// 设置 Session Storage
sessionStorage.setItem("username", "john");

// 检查 Session Storage
function checkSessionStorage() {
  var user = sessionStorage.getItem("username");

  if (user != null) {
    alert("欢迎 " + user + " 再次访问！");
  } else {
    alert("请登录！");
  }
}

以上代码分别使用 Local Storage 和 Session Storage 存储了 username，并使用相应的函数获取数据。

使用服务器端会话

使用服务器端会话需要在服务器端实现用户登录验证逻辑，并在客户端使用 AJAX 调用，检查用户登录状态。

以下是一个基本的示例：

// 检查服务器端会话
function checkServerSession() {
  $.ajax({
    type: "GET",
    url: "/api/checkSession",
    success: function (data) {
      if (data == "true") {
        alert("欢迎再次访问！");
      } else {
        alert("请登录！");
      }
    }
  });
}

以上代码使用了 jQuery 的 AJAX 函数，调用 /api/checkSession 接口检查用户登录状态。

总结

本文介绍了三种检查用户是否登录的方法：使用 cookie、Local Storage 或 Session Storage，以及服务器端会话。开发者可以根据项目需求，选择合适的方法。