176 lines
6.2 KiB
HTML
176 lines
6.2 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>OAuth授权页面测试</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
.test-section {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
}
|
||
.test-button {
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
margin: 5px;
|
||
}
|
||
.test-button:hover {
|
||
background: #0056b3;
|
||
}
|
||
.error {
|
||
color: red;
|
||
}
|
||
.success {
|
||
color: green;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>OAuth授权页面测试</h1>
|
||
|
||
<div class="test-section">
|
||
<h3>测试说明</h3>
|
||
<p>这个页面用于测试OAuth授权页面的修复情况。</p>
|
||
<p><strong>问题描述：</strong>访问OAuth授权页面后直接跳转到login然后又跳转dashboard</p>
|
||
<p><strong>修复内容：</strong></p>
|
||
<ul>
|
||
<li>将OAuth授权页面包装在PrivateRoute中</li>
|
||
<li>等待AuthContext的loading状态完成</li>
|
||
<li>简化组件逻辑，移除重复的认证检查</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>测试步骤</h3>
|
||
<ol>
|
||
<li>确保后端服务运行在 <code>http://localhost:3000</code></li>
|
||
<li>确保前端服务运行在 <code>http://localhost:3001</code></li>
|
||
<li>先登录用户（访问 <code>http://localhost:3001/login</code>）</li>
|
||
<li>在个人中心创建一个OAuth客户端</li>
|
||
<li>使用下面的测试链接访问OAuth授权页面</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>测试链接</h3>
|
||
<p>点击下面的按钮测试OAuth授权页面：</p>
|
||
|
||
<button class="test-button" onclick="testOAuthAuthorize()">
|
||
测试OAuth授权页面
|
||
</button>
|
||
|
||
<button class="test-button" onclick="testWithInvalidParams()">
|
||
测试无效参数
|
||
</button>
|
||
|
||
<button class="test-button" onclick="testWithoutLogin()">
|
||
测试未登录状态
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>预期结果</h3>
|
||
<ul>
|
||
<li class="success">✅ 已登录用户：应该显示授权页面，不跳转到login</li>
|
||
<li class="success">✅ 未登录用户：应该跳转到login页面</li>
|
||
<li class="success">✅ 无效参数：应该显示错误信息</li>
|
||
<li class="success">✅ 加载状态：应该显示加载动画</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>测试结果</h3>
|
||
<div id="testResults">
|
||
<p>点击测试按钮开始测试...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function logResult(message, type = 'info') {
|
||
const resultsDiv = document.getElementById('testResults');
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const color = type === 'error' ? 'red' : type === 'success' ? 'green' : 'blue';
|
||
resultsDiv.innerHTML += `<p style="color: ${color}">[${timestamp}] ${message}</p>`;
|
||
}
|
||
|
||
function testOAuthAuthorize() {
|
||
logResult('开始测试OAuth授权页面...');
|
||
|
||
// 模拟一个有效的OAuth请求
|
||
const clientId = 'test_client_id';
|
||
const redirectUri = 'http://localhost:3001/callback';
|
||
const scope = 'read write';
|
||
const state = 'test123';
|
||
|
||
const authUrl = `http://localhost:3001/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}&state=${state}`;
|
||
|
||
logResult(`重定向到: ${authUrl}`);
|
||
window.open(authUrl, '_blank');
|
||
}
|
||
|
||
function testWithInvalidParams() {
|
||
logResult('开始测试无效参数...');
|
||
|
||
// 模拟一个无效的OAuth请求（缺少client_id）
|
||
const authUrl = 'http://localhost:3001/oauth/authorize?redirect_uri=http://localhost:3001/callback&scope=read&state=test123';
|
||
|
||
logResult(`重定向到: ${authUrl}`);
|
||
window.open(authUrl, '_blank');
|
||
}
|
||
|
||
function testWithoutLogin() {
|
||
logResult('开始测试未登录状态...');
|
||
|
||
// 清除localStorage中的token
|
||
localStorage.removeItem('token');
|
||
logResult('已清除登录状态');
|
||
|
||
const authUrl = 'http://localhost:3001/oauth/authorize?client_id=test&redirect_uri=http://localhost:3001/callback&scope=read&state=test123';
|
||
|
||
logResult(`重定向到: ${authUrl}`);
|
||
window.open(authUrl, '_blank');
|
||
}
|
||
|
||
// 页面加载时检查服务状态
|
||
window.addEventListener('load', async () => {
|
||
logResult('检查服务状态...');
|
||
|
||
try {
|
||
// 检查后端服务
|
||
const backendResponse = await fetch('http://localhost:3000/api/health');
|
||
if (backendResponse.ok) {
|
||
logResult('✅ 后端服务正常运行', 'success');
|
||
} else {
|
||
logResult('❌ 后端服务异常', 'error');
|
||
}
|
||
} catch (error) {
|
||
logResult('❌ 无法连接到后端服务', 'error');
|
||
}
|
||
|
||
try {
|
||
// 检查前端服务
|
||
const frontendResponse = await fetch('http://localhost:3001');
|
||
if (frontendResponse.ok) {
|
||
logResult('✅ 前端服务正常运行', 'success');
|
||
} else {
|
||
logResult('❌ 前端服务异常', 'error');
|
||
}
|
||
} catch (error) {
|
||
logResult('❌ 无法连接到前端服务', 'error');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |