yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端登录登出功能做好了

Browse Source
This commit is contained in:
云泽网
2025-05-27 01:30:41 +08:00
parent ab4a36a7cd
commit 770b8c9092
8 changed files with 753 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/view/component/header-simple.php
+165 -3
View File
@@ -1,3 +1,45 @@
<?php
// 获取当前登录状态
$isLoggedIn = false;
// 检查session
if (session('user_id')) {
$isLoggedIn = true;
}
// 如果session未登录，检查cookie
else {
$userId = cookie('user_id');
$expireTime = cookie('expire_time');
$isAutoLogin = cookie('is_auto_login');
$userAccount = cookie('user_account');
$userPassword = cookie('user_password');
// 如果cookie中有有效的登录信息
if ($userId && $expireTime && $isAutoLogin && $userAccount && $userPassword) {
// 验证时间戳
$currentTime = time() * 1000; // 转换为毫秒
if ($currentTime < intval($expireTime)) {
// 恢复session
session('user_id', $userId);
session('user_name', cookie('user_name'));
session('user_avatar', cookie('user_avatar'));
$isLoggedIn = true;
}
}
}
$userInfo = [
'is_login' => $isLoggedIn,
'name' => session('user_name'),
'avatar' => session('user_avatar') ? '/static/uploads/avatar/' . session('user_avatar') : '/static/images/avatar.png'
];
?>
<!-- 添加一个隐藏的div来存储登录状态 -->
<div id="loginStatus" style="display: none;" data-is-logged-in="{$isLoggedIn}" data-expire-time="{$expireTime ?? ''}"
data-is-auto-login="{$isAutoLogin ?? ''}">
</div>
<div style="display: flex;flex-direction: column;">
<div class="topbar-one">
<div class="container">
@@ -41,7 +83,7 @@
<!-- 根据登录状态显示不同的内容 -->
<?php if ($isLoggedIn): ?>
<div class="layui-inline" style="position: relative;">
<img src="__IMAGES__/avatar.webp" class="layui-circle"
<img src="/static/images/avatar.png" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarSticky">
<div class="user-dropdown" id="userDropdownSticky">
<ul>
@@ -92,7 +134,7 @@
<!-- 根据登录状态显示不同的内容 -->
<?php if ($isLoggedIn): ?>
<div class="layui-inline" style="position: relative;">
<img src="__IMAGES__/avatar.webp" class="layui-circle"
<img src="/static/images/avatar.png" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarSticky">
<div class="user-dropdown" id="userDropdownSticky">
<ul>
@@ -328,6 +370,57 @@
layui.use(['carousel', 'form', 'layer'], function () {
var carousel = layui.carousel, form = layui.form, layer = layui.layer, $ = layui.$;
// 检查本地存储并自动登录
function checkAutoLogin() {
// 如果已经登录，不再执行自动登录
if ($('#userAvatarMain').length > 0) {
return;
}
// 如果已经尝试过自动登录，不再执行
if (sessionStorage.getItem('auto_login_attempted') === 'true') {
return;
}
var expireTime = localStorage.getItem('expire_time');
var isAutoLogin = localStorage.getItem('is_auto_login');
if (expireTime && new Date().getTime() < expireTime && isAutoLogin === 'true') {
// 标记已尝试自动登录
sessionStorage.setItem('auto_login_attempted', 'true');
var account = localStorage.getItem('user_account');
var password = atob(localStorage.getItem('user_password'));
// 发送自动登录请求
$.ajax({
url: '/index/user/login',
type: 'POST',
data: {
account: account,
password: password
},
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 登录成功，刷新页面
window.location.reload();
} else {
// 登录失败，清除所有相关存储
localStorage.removeItem('user_account');
localStorage.removeItem('user_password');
localStorage.removeItem('expire_time');
localStorage.removeItem('is_auto_login');
sessionStorage.removeItem('auto_login_attempted');
}
}
});
}
}
// 页面加载时检查自动登录
checkAutoLogin();
// 加载banner数据
$.ajax({
url: '/index/index/bannerlist',
@@ -400,7 +493,34 @@
layer.confirm('确定要退出登录吗？', {
btn: ['确定', '取消']
}, function () {
window.location.href = '/index/user/logout';
// 先发送退出请求
$.ajax({
url: '/index/user/logout',
type: 'POST',
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 清除localStorage
localStorage.removeItem('user_account');
localStorage.removeItem('user_password');
localStorage.removeItem('expire_time');
localStorage.removeItem('is_auto_login');
// 清除sessionStorage
sessionStorage.removeItem('auto_login_attempted');
// 清除cookie
document.cookie = "user_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "user_name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "user_avatar=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "expire_time=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "is_auto_login=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
// 刷新页面
window.location.reload();
}
}
});
});
});
@@ -437,5 +557,47 @@
popup.addEventListener('mouseleave', function () {
popup.style.display = 'none';
});
form.on('submit(accountLogin)', function (data) {
$.ajax({
url: '{:url("index/user/login")}',
type: 'POST',
data: data.field,
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 存储登录数据，设置7天过期
var expireTime = new Date().getTime() + 7 * 24 * 60 * 60 * 1000;
// 设置localStorage
localStorage.setItem('user_account', data.field.account);
localStorage.setItem('user_password', btoa(data.field.password));
localStorage.setItem('expire_time', expireTime);
localStorage.setItem('is_auto_login', 'true');
// 设置cookie
document.cookie = "user_id=" + res.data.id + "; path=/";
document.cookie = "user_name=" + res.data.name + "; path=/";
document.cookie = "user_avatar=" + res.data.avatar + "; path=/";
document.cookie = "expire_time=" + expireTime + "; path=/";
document.cookie = "is_auto_login=true; path=/";
layer.msg('登录成功', {
icon: 1,
time: 2000,
shade: 0.3
}, function () {
window.location.reload();
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
});
</script>