以下是一个示例代码,演示了如何在前端使用 Cookies 和后端使用会话来区分用户的登录状态。
前端实现:
<!DOCTYPE html>
<html>
<head>
<title>登录状态示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>登录状态示例</h2>
<div id="status"></div>
<script>
$(document).ready(function() {
// 检查登录状态
checkLoginStatus();
// 模拟用户登录
$('#loginBtn').click(function() {
// 发送登录请求并在成功后设置登录状态
$.ajax({
type: 'POST',
url: 'api.php?type=login',
data: {
username: 'example_user',
password: 'example_password'
},
dataType: 'json',
success: function(response) {
if (response.success) {
// 登录成功,设置登录状态的 Cookie
setLoginStatusCookie();
// 更新登录状态
checkLoginStatus();
} else {
console.log(response.message);
}
},
error: function() {
console.log('登录请求失败');
}
});
});
// 模拟用户注销
$('#logoutBtn').click(function() {
// 清除登录状态的 Cookie
clearLoginStatusCookie();
// 更新登录状态
checkLoginStatus();
});
// 检查登录状态的函数
function checkLoginStatus() {
if (getLoginStatusCookie()) {
// 用户已登录
$('#status').text('用户已登录');
} else {
// 用户未登录
$('#status').text('用户未登录');
}
}
// 设置登录状态的 Cookie
function setLoginStatusCookie() {
document.cookie = 'login_status=true; path=/';
}
// 获取登录状态的 Cookie
function getLoginStatusCookie() {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.startsWith('login_status=')) {
return true;
}
}
return false;
}
// 清除登录状态的 Cookie
function clearLoginStatusCookie() {
document.cookie = 'login_status=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
}
});
</script>
<button id="loginBtn">登录</button>
<button id="logoutBtn">注销</button>
</body>
</html>
后端实现:
<?php
session_start();
// 设置响应的内容类型为 JSON
header("Content-Type: application/json");
// 处理登录请求
function login($username, $password)
{
// 进行登录验证,验证成功后设置会话变量
if ($username === 'example_user' && $password === 'example_password') {
$_SESSION['loggedin'] = true;
$response = array(
"success" => true,
"message" => "登录成功"
);
} else {
$response = array(
"success" => false,
"message" => "登录失败,请检查用户名和密码"
);
}
echo json_encode($response);
exit;
}
// 处理