299 lines
11 KiB
HTML
299 lines
11 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>ERP登录功能测试</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
border-bottom: 2px solid #4CAF50;
|
|
padding-bottom: 10px;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
background: #f9f9f9;
|
|
}
|
|
button {
|
|
background: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin: 10px 5px;
|
|
}
|
|
button:hover {
|
|
background: #45a049;
|
|
}
|
|
button:disabled {
|
|
background: #cccccc;
|
|
cursor: not-allowed;
|
|
}
|
|
.result {
|
|
margin-top: 15px;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
background: #e8f5e9;
|
|
border: 1px solid #c8e6c9;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.error {
|
|
background: #ffebee;
|
|
border-color: #ffcdd2;
|
|
}
|
|
.success {
|
|
background: #e8f5e9;
|
|
border-color: #c8e6c9;
|
|
}
|
|
.loading {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>ERP登录功能测试</h1>
|
|
|
|
<div class="test-section">
|
|
<h3>测试1: 正确登录凭证</h3>
|
|
<p>使用测试账号: admin@erp.com / password123</p>
|
|
<button onclick="testCorrectLogin()">测试正确登录</button>
|
|
<div id="result1" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>测试2: 错误登录凭证</h3>
|
|
<p>使用错误账号: wrong@email.com / wrongpassword</p>
|
|
<button onclick="testWrongLogin()">测试错误登录</button>
|
|
<div id="result2" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>测试3: 获取用户信息</h3>
|
|
<p>需要先登录获取token</p>
|
|
<button onclick="getUserInfo()">获取用户信息</button>
|
|
<div id="result3" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>测试4: 完整登录流程</h3>
|
|
<p>1. 登录 → 2. 保存token → 3. 获取用户信息</p>
|
|
<button onclick="testFullFlow()">测试完整流程</button>
|
|
<div id="result4" class="result"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentToken = null;
|
|
|
|
function showResult(elementId, message, isError = false) {
|
|
const element = document.getElementById(elementId);
|
|
element.textContent = message;
|
|
element.className = 'result ' + (isError ? 'error' : 'success');
|
|
}
|
|
|
|
function showLoading(elementId) {
|
|
const element = document.getElementById(elementId);
|
|
element.textContent = '测试中...';
|
|
element.className = 'result loading';
|
|
}
|
|
|
|
async function testCorrectLogin() {
|
|
showLoading('result1');
|
|
try {
|
|
const response = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: 'admin@erp.com',
|
|
password: 'password123'
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok && data.code === 200) {
|
|
currentToken = data.data.token;
|
|
showResult('result1', `✅ 登录成功!\n\n响应状态: ${response.status}\nToken: ${data.data.token}\n用户: ${data.data.user.name}\n邮箱: ${data.data.user.email}`);
|
|
} else {
|
|
showResult('result1', `❌ 登录失败\n\n状态码: ${response.status}\n错误信息: ${data.message || '未知错误'}`, true);
|
|
}
|
|
} catch (error) {
|
|
showResult('result1', `❌ 请求失败: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
async function testWrongLogin() {
|
|
showLoading('result2');
|
|
try {
|
|
const response = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: 'wrong@email.com',
|
|
password: 'wrongpassword'
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.status === 401) {
|
|
showResult('result2', `✅ 预期失败，实际失败\n\n状态码: ${response.status}\n错误信息: ${data.message || '认证失败'}`);
|
|
} else {
|
|
showResult('result2', `❌ 预期失败但成功了\n\n状态码: ${response.status}\n响应: ${JSON.stringify(data, null, 2)}`, true);
|
|
}
|
|
} catch (error) {
|
|
showResult('result2', `❌ 请求失败: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
async function getUserInfo() {
|
|
showLoading('result3');
|
|
if (!currentToken) {
|
|
showResult('result3', '❌ 请先登录获取token', true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/user', {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${currentToken}`
|
|
}
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok && data.code === 200) {
|
|
showResult('result3', `✅ 获取用户信息成功!\n\n用户信息:\n${JSON.stringify(data.data, null, 2)}`);
|
|
} else {
|
|
showResult('result3', `❌ 获取用户信息失败\n\n状态码: ${response.status}\n错误信息: ${data.message || '未知错误'}`, true);
|
|
}
|
|
} catch (error) {
|
|
showResult('result3', `❌ 请求失败: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
async function testFullFlow() {
|
|
showLoading('result4');
|
|
const results = [];
|
|
|
|
try {
|
|
// 步骤1: 登录
|
|
results.push('步骤1: 登录');
|
|
const loginResponse = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: 'admin@erp.com',
|
|
password: 'password123'
|
|
})
|
|
});
|
|
|
|
const loginData = await loginResponse.json();
|
|
|
|
if (loginResponse.ok && loginData.code === 200) {
|
|
currentToken = loginData.data.token;
|
|
results.push(` ✅ 登录成功`);
|
|
results.push(` Token: ${currentToken.substring(0, 20)}...`);
|
|
|
|
// 步骤2: 获取用户信息
|
|
results.push('\n步骤2: 获取用户信息');
|
|
const userResponse = await fetch('/api/user', {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${currentToken}`
|
|
}
|
|
});
|
|
|
|
const userData = await userResponse.json();
|
|
|
|
if (userResponse.ok && userData.code === 200) {
|
|
results.push(` ✅ 获取用户信息成功`);
|
|
results.push(` 用户: ${userData.data.name}`);
|
|
results.push(` 邮箱: ${userData.data.email}`);
|
|
results.push(` 角色: ${userData.data.role}`);
|
|
|
|
// 步骤3: 测试退出登录
|
|
results.push('\n步骤3: 退出登录');
|
|
const logoutResponse = await fetch('/api/auth/logout', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${currentToken}`
|
|
}
|
|
});
|
|
|
|
const logoutData = await logoutResponse.json();
|
|
|
|
if (logoutResponse.ok && logoutData.code === 200) {
|
|
results.push(` ✅ 退出登录成功`);
|
|
currentToken = null;
|
|
} else {
|
|
results.push(` ⚠️ 退出登录响应异常: ${logoutData.message}`);
|
|
}
|
|
|
|
showResult('result4', results.join('\n'));
|
|
} else {
|
|
results.push(` ❌ 获取用户信息失败: ${userData.message}`);
|
|
showResult('result4', results.join('\n'), true);
|
|
}
|
|
} else {
|
|
results.push(` ❌ 登录失败: ${loginData.message}`);
|
|
showResult('result4', results.join('\n'), true);
|
|
}
|
|
} catch (error) {
|
|
results.push(` ❌ 流程执行失败: ${error.message}`);
|
|
showResult('result4', results.join('\n'), true);
|
|
}
|
|
}
|
|
|
|
// 页面加载时检查Mock状态
|
|
window.addEventListener('load', async () => {
|
|
try {
|
|
// 尝试访问一个Mock接口看看是否正常工作
|
|
const testResponse = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email: 'test', password: 'test' })
|
|
});
|
|
|
|
console.log('Mock接口测试响应状态:', testResponse.status);
|
|
} catch (error) {
|
|
console.error('Mock接口测试失败:', error);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |