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>类型的对象。下面是详细的解释：
-
import request from "@/utils/request";：这行代码从@/utils/request模块中导入了一个名为request的函数。这个函数可能是用来发送HTTP请求的工具函数。 -
import { AxiosPromise } from "axios";：从axios库中导入了AxiosPromise类型，这是用来表示一个返回值是AxiosPromise类型的函数的返回值类型。 -
import { CaptchaResult, LoginData, LoginResult } from "./types";：从当前目录下的types模块中导入了三个类型：CaptchaResult、LoginData和LoginResult。这些类型可能用于类型检查，以确保传入的数据和返回的结果符合预期的格式。 -
export function loginApi(data: LoginData): AxiosPromise<LoginResult> { ... }：定义了一个名为loginApi的导出函数，它接收一个LoginData类型的参数data，并返回一个AxiosPromise<LoginResult>类型的对象。 -
在函数体内部，首先创建了一个
FormData对象：const formData = new FormData();。FormData是一个用于构建表单数据的类，可以方便地添加键值对。 -
接下来，使用
formData.append(key, value)方法向formData对象中添加了四个键值对，分别是用户名、密码、验证码ID和验证码代码。这些数据是从传入的data参数中获取的。 -
formData.append("grant_type", "password");：向表单数据中添加了一个固定的键值对，键为"grant_type"，值为"password"。这表明登录授权类型是密码类型。 -
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;