SwtTt29
/
web-follow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复前端使用浏览器缓存而忽略传递参数的问题

hzj
Trae AI 1 month ago
parent
5e4eacdcc3
commit
dc01c375e6
2 changed files with 209 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      web/src/main/resources/static/index.html
  2. 208
      web/src/main/resources/static/login.html

15
web/src/main/resources/static/index.html
View File

@ -762,6 +762,21 @@
var currentTypeFilter = null;
function init() {
// 检查URL是否包含登录参数
const urlParams = new URLSearchParams(window.location.search);
const projectNameFromUrl = urlParams.get('projectName');
const userNameFromUrl = urlParams.get('userName');
const passwordFromUrl = urlParams.get('password');
// 如果URL包含登录参数，清除旧的userInfo并跳转到login.html处理新的登录
if (userNameFromUrl && passwordFromUrl) {
console.log('URL包含登录参数，清除旧的用户信息并跳转到登录页面');
localStorage.removeItem('userInfo');
// 保留URL参数，让login.html处理
window.location.href = 'login.html' + window.location.search;
return;
}
var savedUserInfo = localStorage.getItem('userInfo');
if (!savedUserInfo) {
window.location.href = 'login.html';

208
web/src/main/resources/static/login.html
View File

@ -86,18 +86,18 @@
<body>
<div class="login-container">
<h2>用户登录</h2>
<form id="loginForm">
<form id="loginForm" autocomplete="off">
<div class="form-group">
<label for="projectName">职位名称</label>
<input type="text" id="projectName" name="projectName" placeholder="请输入职位名称" required>
<input type="text" id="projectName" name="projectName" placeholder="请输入职位名称" required autocomplete="off">
</div>
<div class="form-group">
<label for="userName">用户名</label>
<input type="text" id="userName" name="userName" placeholder="请输入用户名" required>
<input type="text" id="userName" name="userName" placeholder="请输入用户名" required autocomplete="off">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
<input type="password" id="password" name="password" placeholder="请输入密码" required autocomplete="off">
</div>
<button type="submit">登录</button>
<div id="errorMessage" class="error-message"></div>
@ -105,18 +105,114 @@
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
// 自动填充并登录功能
function autoLogin() {
console.log('当前URL:', window.location.href);
console.log('URL参数:', window.location.search);
const projectName = document.getElementById('projectName').value;
const userName = document.getElementById('userName').value;
const password = document.getElementById('password').value;
const errorMessage = document.getElementById('errorMessage');
// 清除所有旧的登录信息，避免干扰新的URL参数
localStorage.removeItem('autoLoginInfo');
localStorage.removeItem('proxyLoginInfo');
localStorage.removeItem('userInfo'); // 清除旧的用户信息
// 从URL参数获取登录信息
const urlParams = new URLSearchParams(window.location.search);
let projectNameFromUrl = urlParams.get('projectName');
let userNameFromUrl = urlParams.get('userName');
let passwordFromUrl = urlParams.get('password');
// 处理双重编码的URL参数
try {
if (projectNameFromUrl) {
projectNameFromUrl = decodeURIComponent(projectNameFromUrl);
}
if (userNameFromUrl) {
userNameFromUrl = decodeURIComponent(userNameFromUrl);
}
if (passwordFromUrl) {
passwordFromUrl = decodeURIComponent(passwordFromUrl);
}
} catch (e) {
console.error('双重解码URL参数失败:', e);
}
console.log('原始URL参数值:');
console.log(' projectName:', projectNameFromUrl);
console.log(' userName:', userNameFromUrl);
console.log(' password:', passwordFromUrl);
let loginInfo = null;
// 1. 优先使用URL参数
if (userNameFromUrl && passwordFromUrl) {
loginInfo = {
projectName: projectNameFromUrl || '', // 允许职位名称为空
userName: userNameFromUrl,
password: passwordFromUrl
};
}
// 从localStorage获取登录信息（支持代理页面设置）
else {
const storedLoginInfo = localStorage.getItem('autoLoginInfo');
const proxyLoginInfo = localStorage.getItem('proxyLoginInfo'); // 新增：支持代理页面设置的登录信息
// 2. 其次使用代理页面设置的localStorage信息
if (proxyLoginInfo) {
try {
loginInfo = JSON.parse(proxyLoginInfo);
console.log('从proxyLoginInfo获取的登录信息:', loginInfo);
} catch (e) {
console.error('解析proxyLoginInfo失败:', e);
}
}
// 3. 最后使用autoLoginInfo
else if (storedLoginInfo) {
try {
loginInfo = JSON.parse(storedLoginInfo);
console.log('从localStorage获取的登录信息:', loginInfo);
} catch (e) {
console.error('解析存储的登录信息失败:', e);
}
}
}
// 强制清空表单，确保不受浏览器缓存影响
document.getElementById('projectName').value = '';
document.getElementById('userName').value = '';
document.getElementById('password').value = '';
// 如果有登录信息，自动填充并登录
if (loginInfo) {
console.log('准备自动登录，登录信息:', loginInfo);
// 强制更新表单值，确保使用最新的登录信息
document.getElementById('projectName').value = loginInfo.projectName;
document.getElementById('userName').value = loginInfo.userName;
document.getElementById('password').value = loginInfo.password;
// 触发input事件，确保表单验证更新
document.getElementById('projectName').dispatchEvent(new Event('input'));
document.getElementById('userName').dispatchEvent(new Event('input'));
document.getElementById('password').dispatchEvent(new Event('input'));
// 自动提交登录
submitLogin(loginInfo.projectName, loginInfo.userName, loginInfo.password);
}
}
// 提交登录请求
function submitLogin(projectName, userName, password) {
const errorMessage = document.getElementById('errorMessage');
errorMessage.textContent = '';
console.log('准备发送登录请求，参数:', {
projectName: projectName,
userName: userName,
password: password
});
// 发送登录请求
fetch('http://8.137.125.67:8083/KH/api/login', {
fetch('/KH/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
@ -127,21 +223,105 @@
password: password
})
})
.then(response => response.json())
.then(response => {
console.log('登录API响应:', {
status: response.status,
statusText: response.statusText
});
return response.json();
})
.then(data => {
console.log('登录API响应数据:', data);
if (data.success) {
// 登录成功，存储用户信息并跳转到主页面
console.log('登录成功，准备存储用户信息...');
localStorage.setItem('userInfo', JSON.stringify(data));
window.location.href = 'index.html';
console.log('用户信息已存储，localStorage内容:', localStorage.getItem('userInfo'));
// 清除自动登录信息
localStorage.removeItem('autoLoginInfo');
localStorage.removeItem('proxyLoginInfo'); // 新增：清除代理登录信息
console.log('准备跳转到index.html...');
// 优化：使用绝对路径跳转
window.location.href = '/KH/index.html';
} else {
console.log('登录失败，错误信息:', data.message);
errorMessage.textContent = data.message;
}
})
.catch(error => {
console.error('登录失败:', error);
console.error('登录请求失败:', error);
errorMessage.textContent = '登录失败，请重试';
});
}
// 表单提交处理
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const projectName = document.getElementById('projectName').value;
const userName = document.getElementById('userName').value;
const password = document.getElementById('password').value;
submitLogin(projectName, userName, password);
});
// 新增：监听来自其他页面的消息（支持代理页面通过postMessage传递登录信息）
window.addEventListener('message', function(event) {
console.log('收到来自其他页面的消息:', event);
// 验证消息来源（可选，增强安全性）
if (event.origin === 'http://8.137.125.67:3005' || event.origin === 'http://8.137.125.67:8083') {
try {
const messageData = event.data;
if (messageData.type === 'LOGIN_INFO') {
console.log('收到登录信息:', messageData.data);
// 存储到localStorage
localStorage.setItem('proxyLoginInfo', JSON.stringify(messageData.data));
// 重新检查登录信息
autoLogin();
}
} catch (e) {
console.error('处理消息失败:', e);
}
}
});
// 页面加载时检查是否有登录信息
window.onload = function() {
// 页面加载时立即强制清空表单数据，防止浏览器自动填充
document.getElementById('projectName').value = '';
document.getElementById('userName').value = '';
document.getElementById('password').value = '';
// 延迟调用autoLogin，确保表单清空后再处理URL参数
setTimeout(function() {
autoLogin();
}, 100);
};
// 新增：支持从外部调用的登录函数（用于代理页面直接调用）
window.externalLogin = function(projectName, userName, password) {
console.log('外部调用登录函数，登录信息:', {
projectName: projectName,
userName: userName,
password: password
});
// 存储到localStorage
localStorage.setItem('proxyLoginInfo', JSON.stringify({
projectName: projectName,
userName: userName,
password: password
}));
// 调用登录函数
submitLogin(projectName, userName, password);
};
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save