如何从不同文件调用state对象？LoginState在axios.ts中为空问题

你的核心问题有两个：一是错误地从请求体而非响应体中获取token，二是依赖异步事件监听导致token赋值时机滞后，最终导致axios拦截器执行时LoginState.authUber还未被正确赋值。

1. 修正Token获取逻辑（最关键错误） #

你当前用request.postDataJSON()获取的是前端发送给后端的请求数据（比如邮箱密码），而登录接口的token是在后端返回的响应体里。同时，page.on('requestfinished')是异步事件，无法保证在waitForSelector完成前完成赋值，后续测试启动时token还没写入LoginState。

修改setup.ts，用page.waitForRequest主动等待登录请求完成，同步获取响应体中的token：

setup('authenticate as uber user', async ({ page }) => {
  await page.goto(`${configEnv.baseURL}`)
  await page.locator(LoginRep.emailTextField!).fill(process.env.EMAIL!)
  await page.locator(LoginRep.passwordTextField!).fill(process.env.PASS!)
  
  // 提前监听登录请求
  const loginRequestPromise = page.waitForRequest(req => 
    req.url().match(/authenticate/) && req.method() === 'POST'
  );
  
  await page.locator(LoginPageRep.loginButton!).click();
  
  // 等待请求完成，获取响应体
  const loginRequest = await loginRequestPromise;
  const loginResponse = await loginRequest.response();
  if (loginResponse) {
    const responseData = await loginResponse.json();
    LoginState.authUber = responseData.token; // 从响应体取token
    console.log('已赋值token:', LoginState.authUber); // 验证赋值
  }

  await page.waitForSelector("#nav-channels")
  await page.context().storageState({ path: configAuth.AdminAuth });
});

2. 修正LoginState初始值 #

你当前把authUber初始化为{} as string，空对象转字符串会得到"[object Object]"，会导致Authorization头异常，改成空字符串：

export const LoginState = {
    authUber: '' as string,
} 

3. 修复Axios拦截器问题 #

拦截器中不需要async（无异步操作），且错误回调需要返回Promise.reject(error)，否则会导致请求卡住：

import axios from "axios";
import { configEnv } from "../config/config"
import { LoginState } from "playwright/tests/login/login.state";

const customAxios = axios.create({
  baseURL: configEnv.apiBaseURL,
});

customAxios.interceptors.request.use(
  (config) => {
    if (config.headers && LoginState.authUber) { // 增加token存在性判断
      config.headers['Authorization'] = `Bearer ${LoginState.authUber}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error); // 必须return
  }
);

export default customAxios

验证逻辑 #

修改后，setup会在登录请求完成、token写入LoginState后，才执行后续的waitForSelector和存储状态操作，确保所有依赖LoginState的API测试启动时，token已经正确赋值。

内容的提问来源于stack exchange，提问作者YusufOzt