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.php
+208 -6
View File
@@ -1,8 +1,42 @@
<?php
// 获取当前登录状态
$isLoggedIn = session('user_id') ? true : false;
$isLoggedIn = false;
// 检查session
if (session('user_id')) {
$isLoggedIn = true;
}
// 如果session未登录，检查cookie
else {
$userAccount = cookie('user_account');
if ($userAccount) {
// 恢复session
session('user_id', cookie('user_id'));
session('user_name', cookie('user_name'));
session('user_avatar', cookie('user_avatar'));
$isLoggedIn = true;
}
}
// 添加一个隐藏的div来存储登录状态
$loginStatus = [
'isLoggedIn' => $isLoggedIn,
'userAccount' => $userAccount ?? ''
];
$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-user-account="{$userAccount ?? ''}">
</div>
<div style="display: flex;flex-direction: column;">
<div class="topbar-one">
<div class="container">
@@ -44,9 +78,9 @@ $isLoggedIn = session('user_id') ? true : false;
<div class="main-menu__right">
<div class="layui-inline">
<!-- 根据登录状态显示不同的内容 -->
<?php if ($isLoggedIn): ?>
<?php if ($userInfo['is_login']): ?>
<div class="layui-inline" style="position: relative;">
<img src="__IMAGES__/avatar.webp" class="layui-circle"
<img src="{$userInfo.avatar}" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarMain">
<div class="user-dropdown" id="userDropdownMain">
<ul>
@@ -100,11 +134,16 @@ $isLoggedIn = session('user_id') ? true : false;
</div>
<div class="sticky-nav__right">
<div class="main-menu__right">
<div class="username">
<?php if ($userInfo['is_login']): ?>
<span class="username-text">{$userInfo.name}</span>
<?php endif; ?>
</div>
<div class="layui-inline">
<!-- 根据登录状态显示不同的内容 -->
<?php if ($isLoggedIn): ?>
<?php if ($userInfo['is_login']): ?>
<div class="layui-inline" style="position: relative;">
<img src="__IMAGES__/avatar.webp" class="layui-circle"
<img src="{$userInfo.avatar}" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarSticky">
<div class="user-dropdown" id="userDropdownSticky">
<ul>
@@ -337,9 +376,95 @@ $isLoggedIn = session('user_id') ? true : false;
</style>
<script>
// 在页面加载时立即执行
(function() {
// 检查是否已经刷新过
if (sessionStorage.getItem('has_refreshed') === 'true') {
return;
}
// 检查localStorage中是否有用户账号
var userAccount = localStorage.getItem('user_account');
if (userAccount) {
// 同步到cookie
document.cookie = "user_account=" + userAccount + "; path=/";
// 如果有其他必要的数据，也同步到cookie
var userId = localStorage.getItem('user_id');
var userName = localStorage.getItem('user_name');
var userAvatar = localStorage.getItem('user_avatar');
if (userId) document.cookie = "user_id=" + userId + "; path=/";
if (userName) document.cookie = "user_name=" + userName + "; path=/";
if (userAvatar) document.cookie = "user_avatar=" + userAvatar + "; path=/";
// 刷新页面以应用新的cookie，并标记已刷新
if (!document.cookie.includes('user_id')) {
sessionStorage.setItem('has_refreshed', 'true');
window.location.reload();
}
}
})();
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;
}
// 从localStorage获取用户账号
var userAccount = localStorage.getItem('user_account');
if (userAccount) {
// 标记已尝试自动登录
sessionStorage.setItem('auto_login_attempted', 'true');
// 发送自动登录请求
$.ajax({
url: '/index/user/login',
type: 'POST',
data: {
account: userAccount,
password: atob(localStorage.getItem('user_password'))
},
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 设置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 = "user_account=" + userAccount + "; path=/";
// 同时更新localStorage
localStorage.setItem('user_id', res.data.id);
localStorage.setItem('user_name', res.data.name);
localStorage.setItem('user_avatar', res.data.avatar);
// 登录成功，强制刷新页面
window.location.href = window.location.href + '?t=' + new Date().getTime();
} else {
// 登录失败，清除所有相关存储
localStorage.removeItem('user_account');
localStorage.removeItem('user_password');
sessionStorage.removeItem('auto_login_attempted');
}
}
});
}
}
// 页面加载时检查自动登录
checkAutoLogin();
// 加载banner数据
$.ajax({
url: '/index/index/bannerlist',
@@ -412,7 +537,36 @@ $isLoggedIn = session('user_id') ? true : false;
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('user_id');
localStorage.removeItem('user_name');
localStorage.removeItem('user_avatar');
// 清除sessionStorage
sessionStorage.removeItem('auto_login_attempted');
sessionStorage.removeItem('has_refreshed');
// 清除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 = "user_account=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "user_password=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
// 强制刷新页面，不使用缓存
window.location.href = window.location.href + '?t=' + new Date().getTime();
}
}
});
});
});
@@ -449,5 +603,53 @@ $isLoggedIn = session('user_id') ? true : false;
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=/";
document.cookie = "user_account=" + data.field.account + "; path=/";
document.cookie = "user_password=" + btoa(data.field.password) + "; path=/";
// 设置sessionStorage
sessionStorage.setItem('auto_login_attempted', 'true');
layer.msg('登录成功', {
icon: 1,
time: 2000,
shade: 0.3
}, function () {
// 强制刷新页面，不使用缓存
window.location.href = window.location.href + '?t=' + new Date().getTime();
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
});
</script>