loginApi

import request from "@/utils/request";
import { AxiosPromise } from "axios";
import { CaptchaResult, LoginData, LoginResult } from "./types";

/**
 * 登录API
 *
 * @param data {LoginData}
 * @returns
 */
export function loginApi(data: LoginData): AxiosPromise<LoginResult> {
  const formData = new FormData();
  formData.append("username", data.username);
  formData.append("password", data.password);
  formData.append("captchaId", data.captchaId as string);
  formData.append("captchaCode", data.captchaCode as string);
  formData.append("grant_type", "password");
  return request({
    url: "/youlai-auth/oauth2/token",
    method: "post",
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
      Authorization: "Basic bWFsbC1hZG1pbjoxMjM0NTY=", // 客户端信息Base64明文：mall-admin:123456
    },
  });
}

这段代码定义了一个名为loginApi的函数，它用于处理用户登录的API请求。函数接收一个LoginData类型的参数data，并返回一个AxiosPromise<LoginResult>类型的对象。下面是详细的解释：

1. import request from "@/utils/request";：这行代码从@/utils/request模块中导入了一个名为request的函数。这个函数可能是用来发送HTTP请求的工具函数。

2. import { AxiosPromise } from "axios";：从axios库中导入了AxiosPromise类型，这是用来表示一个返回值是AxiosPromise类型的函数的返回值类型。

3. import { CaptchaResult, LoginData, LoginResult } from "./types";：从当前目录下的types模块中导入了三个类型：CaptchaResult、LoginData和LoginResult。这些类型可能用于类型检查，以确保传入的数据和返回的结果符合预期的格式。

4. export function loginApi(data: LoginData): AxiosPromise<LoginResult> { ... }：定义了一个名为loginApi的导出函数，它接收一个LoginData类型的参数data，并返回一个AxiosPromise<LoginResult>类型的对象。

5. 在函数体内部，首先创建了一个FormData对象：const formData = new FormData();。FormData是一个用于构建表单数据的类，可以方便地添加键值对。

6. 接下来，使用formData.append(key, value)方法向formData对象中添加了四个键值对，分别是用户名、密码、验证码ID和验证码代码。这些数据是从传入的data参数中获取的。

7. formData.append("grant_type", "password");：向表单数据中添加了一个固定的键值对，键为"grant_type"，值为"password"。这表明登录授权类型是密码类型。

8. return request({ ... });：最后，函数通过调用之前导入的request函数发起一个POST请求到URL"/youlai-auth/oauth2/token"。请求的方法是"post"，请求体是之前构建的表单数据formData。同时设置了请求头，其中包含了内容类型为多部分表单数据（"Content-Type": "multipart/form-data"）和基础认证信息（Authorization: "Basic bWFsbC1hZG1pbjoxMjM0NTY="）。这里的认证信息是一个Base64编码的字符串，解码后是客户端ID和密钥的组合，例如：“mall-admin:123456”。

总结来说，loginApi函数用于通过POST请求发送用户的登录信息（包括用户名、密码、验证码等），并返回一个包含登录结果的Promise对象。

request.ts

import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
import { useUserStoreHook } from "@/store/modules/user";

// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
});

// 请求拦截器
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
    const accessToken = localStorage.getItem("accessToken");

    if (accessToken) {
      config.headers.Authorization = accessToken;
    }
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use((response: AxiosResponse) => {
    const { code, msg } = response.data;
    if (code === "00000") {
      return response.data;
    }
    // 响应数据为二进制流处理(Excel导出)
    if (response.data instanceof ArrayBuffer) {
      return response;
    }

    ElMessage.error(msg || "系统出错");
    return Promise.reject(new Error(msg || "Error"));
  },
  (error: any) => {
    if (error.response.data) {
      const { code, msg } = error.response.data;
      // token 过期,重新登录
      if (code === "A0230") {
        ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const userStore = useUserStoreHook();
          userStore.resetToken().then(() => {
            location.reload();
          });
        });
      } else {
        ElMessage.error(msg || "系统出错");
      }
    }
    return Promise.reject(error.message);
  }
);

// 导出 axios 实例
export default service;