CRBC-MaaS-Platform-Project
/
LQAdminFront


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一键测试401跳转</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 40px;
            max-width: 600px;
            width: 100%;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .subtitle {
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 14px;
        }
        .test-box {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 25px;
            margin: 20px 0;
            border: 2px solid #e9ecef;
        }
        .test-box h3 {
            color: #495057;
            margin-bottom: 15px;
            font-size: 18px;
        }
        .test-box p {
            color: #6c757d;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        button {
            width: 100%;
            padding: 16px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            border-radius: 8px;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
        }
        .btn-success {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            color: white;
        }
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(17, 153, 142, 0.4);
        }
        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
            display: none;
        }
        .status.show {
            display: block;
        }
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .countdown {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
            color: #667eea;
        }
        .steps {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 15px;
            margin: 20px 0;
        }
        .steps h4 {
            color: #856404;
            margin-bottom: 10px;
        }
        .steps ol {
            margin-left: 20px;
            color: #856404;
        }
        .steps li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 一键测试401跳转</h1>
        <p class="subtitle">快速验证前端401响应处理是否正常</p>

        <div class="steps">
            <h4>⚠️ 测试前确认：</h4>
            <ol>
                <li>前端开发服务器正在运行</li>
                <li>已重启服务器并清除浏览器缓存</li>
                <li>后台服务正常运行</li>
            </ol>
        </div>

        <div class="test-box">
            <h3>测试1: 基本跳转功能</h3>
            <p>测试 window.location.href 是否能正常跳转到登录页</p>
            <button class="btn-primary" onclick="test1()">开始测试</button>
            <div id="status1" class="status"></div>
            <div id="countdown1" class="countdown"></div>
        </div>

        <div class="test-box">
            <h3>测试2: 完整401流程</h3>
            <p>设置无效token并刷新页面，测试完整的401处理流程</p>
            <button class="btn-success" onclick="test2()">开始测试</button>
            <div id="status2" class="status"></div>
            <div id="countdown2" class="countdown"></div>
        </div>
    </div>

    <script>
        function showStatus(id, message, type) {
            const status = document.getElementById(id);
            status.textContent = message;
            status.className = `status show ${type}`;
        }

        function showCountdown(id, seconds, callback) {
            const countdown = document.getElementById(id);
            countdown.textContent = seconds;
            
            const timer = setInterval(() => {
                seconds--;
                countdown.textContent = seconds;
                
                if (seconds <= 0) {
                    clearInterval(timer);
                    countdown.textContent = '';
                    callback();
                }
            }, 1000);
        }

        function test1() {
            console.log('=== 测试1: 基本跳转功能 ===');
            showStatus('status1', '准备跳转到登录页...', 'info');
            
            showCountdown('countdown1', 3, () => {
                console.log('执行跳转: window.location.href = "/login"');
                showStatus('status1', '正在跳转...', 'success');
                window.location.href = '/login';
            });
        }

        function test2() {
            console.log('=== 测试2: 完整401流程 ===');
            
            // 设置无效token
            console.log('步骤1: 设置无效token');
            localStorage.setItem('sso_access_token', 'invalid_token_for_test_' + Date.now());
            showStatus('status2', '已设置无效token，准备刷新页面...', 'info');
            
            showCountdown('countdown2', 3, () => {
                console.log('步骤2: 刷新页面');
                showStatus('status2', '正在刷新页面...', 'success');
                console.log('页面刷新后应该自动跳转到登录页');
                location.reload();
            });
        }

        // 页面加载时的提示
        window.addEventListener('load', () => {
            console.log('=== 401跳转测试页面已加载 ===');
            console.log('请点击按钮开始测试');
            console.log('');
            console.log('测试1: 验证基本跳转功能');
            console.log('测试2: 验证完整401处理流程');
            console.log('');
            console.log('如果测试1成功但测试2失败，说明前端代码有问题');
            console.log('如果测试1失败，说明浏览器阻止了跳转');
        });
    </script>
</body>
</html>