135 lines
4.5 KiB
HTML
135 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>自动登录测试</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.test-item {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.success {
|
|
background-color: #f6ffed;
|
|
border-color: #b7eb8f;
|
|
}
|
|
.error {
|
|
background-color: #fff2f0;
|
|
border-color: #ffccc7;
|
|
}
|
|
button {
|
|
background-color: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background-color: #40a9ff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>自动登录功能测试</h1>
|
|
|
|
<div class="test-item">
|
|
<h3>测试步骤：</h3>
|
|
<ol>
|
|
<li>点击"清除登录状态"按钮</li>
|
|
<li>点击"访问登录页面"按钮</li>
|
|
<li>观察是否自动登录并跳转到仪表盘</li>
|
|
<li>点击"访问用户管理页面"测试路由守卫</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-item">
|
|
<h3>当前状态：</h3>
|
|
<p>Token: <span id="token-status">检查中...</span></p>
|
|
<p>用户信息: <span id="user-status">检查中...</span></p>
|
|
</div>
|
|
|
|
<div class="test-item">
|
|
<h3>测试操作：</h3>
|
|
<button onclick="clearLoginState()">清除登录状态</button>
|
|
<button onclick="checkLoginState()">检查登录状态</button>
|
|
<button onclick="visitLoginPage()">访问登录页面</button>
|
|
<button onclick="visitUsersPage()">访问用户管理页面</button>
|
|
<button onclick="visitDashboard()">访问仪表盘</button>
|
|
</div>
|
|
|
|
<div class="test-item">
|
|
<h3>测试结果：</h3>
|
|
<div id="test-results"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function addResult(message, isSuccess = true) {
|
|
const results = document.getElementById('test-results');
|
|
const div = document.createElement('div');
|
|
div.className = isSuccess ? 'success' : 'error';
|
|
div.style.margin = '10px 0';
|
|
div.style.padding = '10px';
|
|
div.style.borderRadius = '4px';
|
|
div.innerHTML = `<strong>${new Date().toLocaleTimeString()}</strong>: ${message}`;
|
|
results.appendChild(div);
|
|
}
|
|
|
|
function clearLoginState() {
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
addResult('已清除登录状态');
|
|
checkLoginState();
|
|
}
|
|
|
|
function checkLoginState() {
|
|
const token = localStorage.getItem('token');
|
|
const user = localStorage.getItem('user');
|
|
|
|
document.getElementById('token-status').textContent = token ? '已存在' : '不存在';
|
|
document.getElementById('user-status').textContent = user ? JSON.parse(user).username : '未登录';
|
|
|
|
addResult(`登录状态检查 - Token: ${token ? '存在' : '不存在'}, 用户: ${user ? JSON.parse(user).username : '未登录'}`);
|
|
}
|
|
|
|
function visitLoginPage() {
|
|
addResult('正在访问登录页面...');
|
|
window.open('http://localhost:5300/#/login', '_blank');
|
|
}
|
|
|
|
function visitUsersPage() {
|
|
addResult('正在访问用户管理页面...');
|
|
window.open('http://localhost:5300/#/users', '_blank');
|
|
}
|
|
|
|
function visitDashboard() {
|
|
addResult('正在访问仪表盘...');
|
|
window.open('http://localhost:5300/#/dashboard', '_blank');
|
|
}
|
|
|
|
// 页面加载时检查状态
|
|
window.onload = function() {
|
|
checkLoginState();
|
|
addResult('测试页面已加载，请按照测试步骤进行操作');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |