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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/index/controller/BaseController.php
View File

@ -1,5 +1,5 @@
<?php
declare (strict_types = 1);
declare(strict_types=1);
namespace app\index\controller;
@ -10,6 +10,8 @@ use think\facade\Db;
use app\service\VisitStatsService;
use PHPMailer\PHPMailer\PHPMailer;
use app\index\model\MailConfig;
use app\index\model\AdminConfig;
use app\index\model\Users;
/**
* 前台控制器基础类
@ -36,7 +38,7 @@ abstract class BaseController
*/
public function __construct(App $app)
{
$this->app = $app;
$this->app = $app;
$this->request = $this->app->request;
$this->visitStats = new VisitStatsService();
@ -53,8 +55,7 @@ abstract class BaseController
$this->visitStats->recordVisit($this->getControllerName());
// 获取配置
$configList = Db::table('yz_admin_config')
->where('config_status', 1)
$configList = AdminConfig::where('config_status', 1)
->order('config_sort DESC')
->select()
->toArray();
@ -65,9 +66,34 @@ abstract class BaseController
$config[$item['config_name']] = $item['config_value'];
}
// 判断用户是否登录
$userInfo = [];
if (session('user_id')) {
// 从数据库获取最新用户信息
$user = Users::where('id', session('user_id'))->find();
if ($user) {
$userInfo = [
'id' => $user->id,
'name' => $user->name,
'account' => $user->account,
'avatar' => $user->avatar ?? '/static/images/default-avatar.png',
'is_login' => true,
'last_login_time' => $user->last_login_time
];
} else {
// 用户不存在，清除session
session('user_id', null);
session('user_name', null);
$userInfo = ['is_login' => false];
}
} else {
$userInfo = ['is_login' => false];
}
// 设置通用变量
View::assign([
'config' => $config
'config' => $config,
'userInfo' => $userInfo
]);
}
@ -99,22 +125,22 @@ abstract class BaseController
* @param string $url 跳转地址
* @param mixed $data 返回数据
* @param integer $wait 跳转等待时间
* @return void
* @return \think\response\Json|string
*/
protected function success($msg = '', $url = null, $data = '', $wait = 3)
{
if (Request::isAjax()) {
return json([
'code' => 1,
'msg' => $msg,
'msg' => $msg,
'data' => $data,
'url' => $url
'url' => $url
]);
}
return View::fetch('common/success', [
'msg' => $msg,
'url' => $url,
'msg' => $msg,
'url' => $url,
'data' => $data,
'wait' => $wait
]);
@ -126,28 +152,28 @@ abstract class BaseController
* @param string $url 跳转地址
* @param mixed $data 返回数据
* @param integer $wait 跳转等待时间
* @return void
* @return \think\response\Json|string
*/
protected function error($msg = '', $url = null, $data = '', $wait = 3)
{
if (Request::isAjax()) {
return json([
'code' => 0,
'msg' => $msg,
'msg' => $msg,
'data' => $data,
'url' => $url
'url' => $url
]);
}
return View::fetch('common/error', [
'msg' => $msg,
'url' => $url,
'msg' => $msg,
'url' => $url,
'data' => $data,
'wait' => $wait
]);
}
protected function sendEmail($to, $content, $title)
{
// 获取邮件配置

71
app/index/controller/UserController.php
View File

@ -18,16 +18,47 @@ class UserController extends BaseController
*/
public function login()
{
// 增加日志记录，记录用户访问登录页面的操作
Log::record('用户访问登录页面', 'info');
if ($this->request->isPost()) {
$data = $this->request->post();
// 如果用户已经登录，直接跳转到主页
if (session('user_id')) {
return redirect('index');
} else {
//跳转登录界面
return view('login');
try {
// 验证数据
$validate = validate([
'account' => 'require|email',
'password' => 'require'
]);
if (!$validate->check($data)) {
return json(['code' => 1, 'msg' => $validate->getError()]);
}
// 查询用户
$user = Users::where('account', $data['account'])->find();
if (!$user) {
return json(['code' => 1, 'msg' => '用户不存在']);
}
// 验证密码
if ($user->password !== md5($data['password'])) {
return json(['code' => 1, 'msg' => '密码错误']);
}
// 登录成功，设置session
session('user_id', $user->id);
session('user_name', $user->name);
session('user_avatar', $user->avatar ?? '/static/images/avatar.png');
// 记录登录日志
Log::record('用户登录成功：' . $user->account, 'info');
return json(['code' => 0, 'msg' => '登录成功']);
} catch (\Exception $e) {
return json(['code' => 1, 'msg' => '登录失败：' . $e->getMessage()]);
}
}
return view('login');
}
/**
@ -43,7 +74,7 @@ class UserController extends BaseController
try {
// 验证数据
$validate = validate([
'account' => 'require|email|unique:users',
'account' => 'require|email|unique:users',
'code' => 'require|number|length:6',
'password' => 'require|min:6|max:20',
'repassword' => 'require|confirm:password'
@ -62,19 +93,19 @@ class UserController extends BaseController
]);
if (!$validate->check($data)) {
return json(['code' => 1, 'msg' => $validate->getError()]);
return json(['code' => 1, 'msg' => $validate->getError()]);
}
// 验证邮箱验证码
$emailCode = cache('email_code_' . $data['account']);
if (!$emailCode || $emailCode != $data['code']) {
return json(['code' => 1, 'msg' => '验证码错误或已过期']);
return json(['code' => 1, 'msg' => '验证码错误或已过期']);
}
// 创建用户
$user = new Users;
$user->account = $data['account'];
$user->password = md5($data['password']);
$user->password = md5($data['password']);
$user->name = $this->generateRandomName();
$user->create_time = time();
$user->save();
@ -82,10 +113,10 @@ class UserController extends BaseController
// 清除验证码缓存
cache('email_code_' . $data['account'], null);
return json(['code' => 0, 'msg' => '注册成功']);
return json(['code' => 0, 'msg' => '注册成功']);
} catch (\Exception $e) {
return json(['code' => 1, 'msg' => '注册失败：' . $e->getMessage()]);
return json(['code' => 1, 'msg' => '注册失败：' . $e->getMessage()]);
}
}
@ -107,7 +138,17 @@ class UserController extends BaseController
// 清除缓存中的用户信息
Cache::tag('user_cache')->clear();
return redirect('login');
// 清除cookie
cookie('user_id', null);
cookie('user_name', null);
cookie('user_avatar', null);
cookie('expire_time', null);
cookie('is_auto_login', null);
cookie('auto_login_attempted', null);
// 返回成功状态
return json(['code' => 0, 'msg' => '退出成功']);
}
// 生成随机用户名

8
app/index/model/AdminConfig.php Normal file
View File

@ -0,0 +1,8 @@
<?php
namespace app\index\model;
use think\Model;
class AdminConfig extends Model
{
}

168
app/index/view/component/header-simple.php
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>

214
app/index/view/component/header.php
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>

78
app/index/view/user/login.php
View File

@ -154,16 +154,16 @@
</div>
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="account">账号密码</li>
<li lay-id="phone">手机验证码</li>
<li lay-id="wechat">微信登录</li>
<li class="layui-this" lay-id="account">账密登录</li>
<!-- <li lay-id="phone">手机验证码</li>
<li lay-id="wechat">微信登录</li> -->
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" id="account">
<form action="#" method="post" class="layui-form login-form">
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
<input type="text" name="account" required lay-verify="required" placeholder="请输入用户名"
autocomplete="off" class="layui-input">
</div>
</div>
@ -185,7 +185,7 @@
</div>
</form>
</div>
<div class="layui-tab-item" id="phone">
<!-- <div class="layui-tab-item" id="phone">
<form action="#" method="post" class="layui-form login-form">
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
@ -216,28 +216,75 @@
<img src="" alt="微信登录" class="layui-img">
<p>点击使用微信登录</p>
</div>
</div>
</div> -->
</div>
</div>
</div>
<script>
layui.use(['form', 'element'], function () {
layui.use(['form', 'element', 'jquery'], function () {
var form = layui.form;
var element = layui.element;
var $ = layui.jquery;
form.on('submit(accountLogin)', function (data) {
console.log(data.field);
$.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.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');
layer.msg('登录成功', {
icon: 1,
time: 2000,
shade: 0.3
}, function () {
window.location.href = '{:url("/")}';
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
form.on('submit(phoneLogin)', function (data) {
console.log(data.field);
return false;
// 页面加载时检查是否有保存的登录数据
$(function () {
var expireTime = localStorage.getItem('expire_time');
var isAutoLogin = localStorage.getItem('is_auto_login');
if (expireTime && new Date().getTime() < expireTime && isAutoLogin === 'true') {
$('input[name="account"]').val(localStorage.getItem('user_account'));
$('input[name="password"]').val(atob(localStorage.getItem('user_password')));
} else {
// 如果过期或未开启自动登录，清除数据
localStorage.removeItem('user_account');
localStorage.removeItem('user_password');
localStorage.removeItem('expire_time');
localStorage.removeItem('is_auto_login');
}
});
document.getElementById('getCode').addEventListener('click', function () {
console.log('获取验证码');
});
// form.on('submit(phoneLogin)', function (data) {
// console.log(data.field);
// return false;
// });
// document.getElementById('getCode').addEventListener('click', function () {
// console.log('获取验证码');
// });
});
</script>
@ -245,8 +292,9 @@
.layui-form-item a {
color: #409eff;
}
.layui-form-item a:hover {
color:rgb(58, 125, 196);
color: rgb(58, 125, 196);
}
</style>
</body>

BIN
public/static/images/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

216
runtime/index/temp/69170ce622adbb0032543cdbee52d3fd.php
View File

@ -1,4 +1,4 @@
<?php /*a:4:{s:49:"E:\Demo\PHP\yunzer\app\index\view\index\index.php";i:1746890051;s:54:"E:\Demo\PHP\yunzer\app\index\view\component\header.php";i:1748266393;s:52:"E:\Demo\PHP\yunzer\app\index\view\component\main.php";i:1747748380;s:54:"E:\Demo\PHP\yunzer\app\index\view\component\footer.php";i:1747649140;}*/ ?>
<?php /*a:4:{s:49:"E:\Demo\PHP\yunzer\app\index\view\index\index.php";i:1746890051;s:54:"E:\Demo\PHP\yunzer\app\index\view\component\header.php";i:1748280591;s:52:"E:\Demo\PHP\yunzer\app\index\view\component\main.php";i:1747748380;s:54:"E:\Demo\PHP\yunzer\app\index\view\component\footer.php";i:1747649140;}*/ ?>
<!DOCTYPE html>
<html>
@ -18,9 +18,43 @@
<body>
<?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="<?php echo htmlentities((string) $isLoggedIn); ?>"
data-user-account="<?php echo isset($userAccount) ? htmlentities((string) $userAccount) : ''; ?>">
</div>
<div style="display: flex;flex-direction: column;">
<div class="topbar-one">
<div class="container">
@ -62,9 +96,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="/static/images/avatar.webp" class="layui-circle"
<img src="<?php echo htmlentities((string) $userInfo['avatar']); ?>" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarMain">
<div class="user-dropdown" id="userDropdownMain">
<ul>
@ -118,11 +152,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"><?php echo htmlentities((string) $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="/static/images/avatar.webp" class="layui-circle"
<img src="<?php echo htmlentities((string) $userInfo['avatar']); ?>" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarSticky">
<div class="user-dropdown" id="userDropdownSticky">
<ul>
@ -355,9 +394,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',
@ -430,7 +555,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();
}
}
});
});
});
@ -467,6 +621,54 @@ $isLoggedIn = session('user_id') ? true : false;
popup.addEventListener('mouseleave', function () {
popup.style.display = 'none';
});
form.on('submit(accountLogin)', function (data) {
$.ajax({
url: '<?php echo 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>
<main class="main-content">