Skip to content

Token 获取测试前置工具(tokenTestUtils.js)

用于组件测试前调用真实接口获取有效 token,存储到 Vuex 和本地,为后续依赖 token 的测试提供前置环境。

javascript
import Vue from "vue";
import Vuex from "vuex";
import { pushData } from "@/api/insure"; // 真实获取 token 接口
import { setToken } from "@/utils/auth"; // token 存储工具
import { publicKey, formData } from "./mockcustomer"; // 接口请求参数
import RSAUtils from "../../utils/rsaUtil"; // RSA 加密工具

// 注册 Vuex(用于存储 token)
Vue.use(Vuex);

/**
 * 创建简化版 Vuex Store(仅用于存储 token)
 * @returns {Vuex.Store} 初始化后的 Store 实例
 */
const createTokenStore = () => {
  return new Vuex.Store({
    state: {
      token: "", // 存储接口返回的 token
      user: null, // 预留用户信息字段(按需启用)
    },
    mutations: {
      // 更新 token 到 Store
      SET_TOKEN(state, token) {
        state.token = token;
      },
      // 预留用户信息更新方法(按需启用)
      SET_USER(state, user) {
        state.user = user;
      },
    },
  });
};

/**
 * 调用真实接口获取 token,并存储到 Store 和本地
 * @returns {Promise<{token: string, store: Vuex.Store}>} 包含 token 和 Store 的结果
 * @throws {Error} 获取失败时抛出错误
 */
export async function getTokenAndStore() {
  const store = createTokenStore();

  try {
    // 1. 加密请求参数
    const dataStr = JSON.stringify(formData);
    const encryptContent = await RSAUtils.encrypt(dataStr, publicKey);

    // 2. 调用真实接口获取 token
    console.log("正在调用 pushData 接口获取 token...");
    const response = await pushData({
      encryptContent,
      appId: "10100001",
    });

    // 3. 解析接口返回的 token
    const { insureUrl } = response.data;
    if (!insureUrl) throw new Error("接口未返回 insureUrl");

    const token = insureUrl.split("?")[1]?.split("=")[1];
    if (!token) throw new Error("接口返回中未解析到 token,请检查响应格式");

    // 4. 存储 token(Store + 本地)
    store.commit("SET_TOKEN", token);
    setToken(token);

    console.log("token 获取成功并存储完成");
    return { token, store };
  } catch (error) {
    console.error("获取 token 失败:", error.message);
    throw error; // 抛出错误供调用方处理
  }
}

核心功能说明:

  1. 真实接口交互:调用项目 pushData 真实接口,按实际业务逻辑完成参数加密、请求发送和 token 解析。
  2. 双重存储 token:将解析后的 token 存入 Vuex Store(供组件内 this.$store 访问)和本地存储(供后续接口请求携带)。
  3. 简化依赖:Store 仅保留 token 存储核心逻辑,避免冗余状态,提升测试效率。
  4. 错误处理:包含参数加密、接口响应、token 解析全流程错误捕获,便于定位问题。

使用场景:

在依赖 token 的组件测试文件中引入,前置获取 token:

javascript
import { getTokenAndStore } from "./tokenTestUtils";

let store, token;

// 所有测试用例执行前获取一次 token
beforeAll(async () => {
  const result = await getTokenAndStore();
  store = result.store;
  token = result.token;
});

// 组件挂载时注入 Store
const wrapper = mount(TargetComponent, {
  Vue,
  store,
  // 其他配置...
});

Released under the MIT License.