telegram-management-system/frontend-vben/auth-debug.js

import { chromium } from 'playwright';

async function debugAuth() {
  const browser = await chromium.launch({
    headless: false,
    slowMo: 500,
  });

  const context = await browser.newContext();
  const page = await context.newPage();

  // 存储所有网络请求
  const apiRequests = [];
  const apiResponses = [];

  // 监听API请求
  page.on('request', (request) => {
    if (
      request.url().includes('localhost:3000') ||
      request.url().includes('/api/') ||
      request.url().includes('/auth/') ||
      request.url().includes('/base')
    ) {
      apiRequests.push({
        method: request.method(),
        url: request.url(),
        headers: request.headers(),
        timestamp: new Date().toISOString(),
      });
      console.log(`🔵 API请求: ${request.method()} ${request.url()}`);
      console.log(
        `   Headers: ${JSON.stringify(request.headers().authorization || 'no auth header')}`,
      );
    }
  });

  // 监听API响应
  page.on('response', (response) => {
    if (
      response.url().includes('localhost:3000') ||
      response.url().includes('/api/') ||
      response.url().includes('/auth/') ||
      response.url().includes('/base')
    ) {
      apiResponses.push({
        status: response.status(),
        url: response.url(),
        headers: response.headers(),
        timestamp: new Date().toISOString(),
      });
      console.log(`🟢 API响应: ${response.status()} ${response.url()}`);

      // 如果是401错误，特别标注
      if (response.status() === 401) {
        console.log(`❌ 401 认证失败: ${response.url()}`);
      }
    }
  });

  try {
    console.log('🚀 开始测试...');

    // 1. 访问首页
    console.log('\n1️⃣ 访问首页');
    await page.goto('http://localhost:5173');
    await page.waitForTimeout(3000);

    // 2. 登录
    console.log('\n2️⃣ 尝试登录');

    // 等待登录表单
    await page.waitForSelector('input[type="text"], input[type="password"]', {
      timeout: 10000,
    });

    // 填写用户名
    const usernameInput = await page.$('input[type="text"]');
    if (usernameInput) {
      await usernameInput.fill('admin');
      console.log('✅ 用户名已填入: admin');
    }

    // 填写密码
    const passwordInput = await page.$('input[type="password"]');
    if (passwordInput) {
      await passwordInput.fill('111111');
      console.log('✅ 密码已填入');
    }

    // 点击登录
    const loginButton = await page.$('button[type="submit"], .ant-btn-primary');
    if (loginButton) {
      await loginButton.click();
      console.log('✅ 登录按钮已点击');
    }

    // 等待登录处理
    await page.waitForTimeout(3000);

    // 3. 检查token
    console.log('\n3️⃣ 检查认证状态');
    const localStorage = await page.evaluate(() => {
      return {
        token: localStorage.getItem('token'),
        accessToken: localStorage.getItem('accessToken'),
        authToken: localStorage.getItem('authToken'),
        allKeys: Object.keys(localStorage),
      };
    });

    console.log('LocalStorage状态:', localStorage);

    // 4. 导航到dashboard
    console.log('\n4️⃣ 导航到dashboard');
    await page.goto('http://localhost:5173/dashboard/home');
    await page.waitForTimeout(5000);

    // 5. 检查页面内容
    console.log('\n5️⃣ 检查页面内容');
    const pageTitle = await page.title();
    const currentUrl = page.url();

    console.log('页面标题:', pageTitle);
    console.log('当前URL:', currentUrl);

    // 检查是否有错误信息
    const errorText = await page.textContent('body');
    if (errorText.includes('401') || errorText.includes('Unauthorized')) {
      console.log('❌ 页面显示认证错误');
    }

    // 6. 强制触发API请求
    console.log('\n6️⃣ 尝试触发API请求');

    // 刷新页面触发数据加载
    await page.reload();
    await page.waitForTimeout(3000);

    // 尝试点击可能触发API的元素
    const buttons = await page.$$('button');
    if (buttons.length > 0) {
      console.log(`发现 ${buttons.length} 个按钮，尝试点击...`);
      try {
        await buttons[0].click();
        await page.waitForTimeout(1000);
      } catch (e) {
        console.log('点击按钮出错:', e.message);
      }
    }

    // 7. 总结API调用情况
    console.log('\n7️⃣ API调用总结');
    console.log(`总共发现 ${apiRequests.length} 个API请求`);
    console.log(`总共收到 ${apiResponses.length} 个API响应`);

    if (apiRequests.length === 0) {
      console.log('⚠️ 没有发现任何API请求，可能是：');
      console.log('   - 前端没有配置API调用');
      console.log('   - API调用被其他逻辑阻止');
      console.log('   - 路由配置问题');
    }

    // 显示401错误的详细信息
    const failedRequests = apiResponses.filter((r) => r.status === 401);
    if (failedRequests.length > 0) {
      console.log(`\n❌ 发现 ${failedRequests.length} 个401错误:`);
      failedRequests.forEach((req) => {
        console.log(`   - ${req.url}`);
      });
    }

    // 显示所有API请求的认证头
    console.log('\n🔐 认证头检查:');
    apiRequests.forEach((req) => {
      const authHeader =
        req.headers.authorization || req.headers['Authorization'];
      console.log(`${req.method} ${req.url}`);
      console.log(`   Authorization: ${authHeader || '❌ 无认证头'}`);
    });

    console.log('\n✅ 测试完成');
    console.log('浏览器将保持打开30秒供手动检查...');

    await page.waitForTimeout(30000);
  } catch (error) {
    console.error('❌ 测试出错:', error);
  }

  await browser.close();
}

debugAuth().catch(console.error);