loginApi

1. import request from "@/utils/request";
2. import { AxiosPromise } from "axios";
3. import { CaptchaResult, LoginData, LoginResult } from "./types";
5. /**
6. * 登录API
7. *
8. * @param data {LoginData}
9. * @returns
10. */
11. export function loginApi(data: LoginData): AxiosPromise<LoginResult> {
12.   const formData = new FormData();
13.   formData.append("username", data.username);
14.   formData.append("password", data.password);
15.   formData.append("captchaId", data.captchaId as string);
16.   formData.append("captchaCode", data.captchaCode as string);
17.   formData.append("grant_type", "password");
18.   return request({
19.     url: "/youlai-auth/oauth2/token",
20.     method: "post",
21.     data: formData,
22.     headers: {
23.       "Content-Type": "multipart/form-data",
24.       Authorization: "Basic bWFsbC1hZG1pbjoxMjM0NTY=", // 客户端信息Base64明文：mall-admin:123456
25.     },
26.   });
27. }

复制代码

这段代码界说了一个名为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

1. import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
2. import { useUserStoreHook } from "@/store/modules/user";
4. // 创建 axios 实例
5. const service = axios.create({
6.   baseURL: import.meta.env.VITE_APP_BASE_API,
7.   timeout: 50000,
8.   headers: { "Content-Type": "application/json;charset=utf-8" },
9. });
11. // 请求拦截器
12. service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
13.     const accessToken = localStorage.getItem("accessToken");
15.     if (accessToken) {
16.       config.headers.Authorization = accessToken;
17.     }
18.     return config;
19.   },
20.   (error: any) => {
21.     return Promise.reject(error);
22.   }
23. );
25. // 响应拦截器
26. service.interceptors.response.use((response: AxiosResponse) => {
27.     const { code, msg } = response.data;
28.     if (code === "00000") {
29.       return response.data;
30.     }
31.     // 响应数据为二进制流处理(Excel导出)
32.     if (response.data instanceof ArrayBuffer) {
33.       return response;
34.     }
36.     ElMessage.error(msg || "系统出错");
37.     return Promise.reject(new Error(msg || "Error"));
38.   },
39.   (error: any) => {
40.     if (error.response.data) {
41.       const { code, msg } = error.response.data;
42.       // token 过期,重新登录
43.       if (code === "A0230") {
44.         ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
45.           confirmButtonText: "确定",
46.           cancelButtonText: "取消",
47.           type: "warning",
48.         }).then(() => {
49.           const userStore = useUserStoreHook();
50.           userStore.resetToken().then(() => {
51.             location.reload();
52.           });
53.         });
54.       } else {
55.         ElMessage.error(msg || "系统出错");
56.       }
57.     }
58.     return Promise.reject(error.message);
59.   }
60. );
62. // 导出 axios 实例
63. export default service;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金