安装axios

在vue项目中通常使用axios完成对接口的请求，首先通过命令npm install axios -save安装依赖（后面其他模块的安装也是如此，将不再赘述）。安装完成后在main.js文件中进行引入。

编写登录逻辑

首先给登录页面上的【登录】按钮添加点击事件login。

<a-form-item>
  <a-button type="primary" class="btn-login" @click="login"
    >登录</a-button
  >
</a-form-item>

然后在login事件中调用后端接口

<script setup>
import { inject, reactive } from "vue";

const axios = inject("$axios");

const formState = reactive({
  username: "",
  password: "",
});

const login = () => {
  axios
    .post("http://127.0.0.1:8000/login/", {
      username: formState.username,
      password: formState.password,
    })
    .then((val) => {
      console.log(val);
    });
};
</script>

再次启动项目，输入用户名和密码，打开开发者工具，点击【登录】按钮后可以看到接口正常请求了，但是报错了，"CORS"跨域请求。

解决跨域问题

解决跨域问题的方案有很多种，可以前端实现也可以后端实现

后端实现
- 在相应头中新增Access-Control-Allow-Origin头
前端实现
- 通过node配置，在本地启动时可以进行接口转发
- 通过nginx配置，在服务启动时可以进行接口转发

本节先采用后端实现的方案

打开后端项目，安装django-cors-headers插件
在配置文件中新增配置项

在配置文件中新增跨域配置，这里为了方便直接允许全部，生产上最好进行限制，给出白名单

全部配置完成后，重启后端项目

后端设置允许跨域之后，再次点击页面【登录】按钮，可以看到控制台已经打印出token信息了。

前端代码优化

上面已经完成了前端对login接口的调用，接下来进行前端代码的美化：

第一个优化点：如果要对接多个接口，是不是每个ip和端口都要重复写一遍，如果后期ip和端口变更需要全部进行更改，因此需要配置axios的基本路径。

在src下创建一个utils文件夹，用来存放项目中的工具类，然后在utils下创建request.js文件，用来放置接口的配置。
然后设置baseURL

import axios from "axios";

// create an axios instance
const service = axios.create({
  baseURL: "http://127.0.0.1:8000/", // url = base url + request url
  timeout: 60000, // request timeout
});

export default service;

第二个优化点：如果要对接的一个接口需要在很多页面使用，那就需要在每个页面重复写很多次接口调用，因此可以将接口调用逻辑抽取出来单独存放，后面每个页面只需要传递参数调用方法就可以了。

在src下创建一个apis文件夹，用来存放各个模块的接口请求，然后在apis下创建user.js文件，用来放置用户相关接口的请求，比如登录请求。

import request from "@/utils/request";

export function loginApi(username, password) {
  return request({
    url: "login/",
    method: "post",
    body: {
      username,
      password,
    },
  });
}

第三个优化点：一般项目中接口返回的响应都是固定格式的，如果在每个请求中去单独处理同样要写很多重复的代码，因此可以使用axios的响应拦截器去完成这个工作。

在request.js文件中新增响应拦截器，主要是在响应成功过的时候直接返回响应内容，在响应失败的时候，根据状态码提示错误信息。

service.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      return response.data;
    }
  },
  (error) => {
    let response = error.response;
    let currentPath = router.currentRoute.value.path;
    switch (response.status) {
      case 400:
        console.log(response);
        break;
      case 401:
        // 判断当前页面
        if (currentPath === "/login") {
          console.error("用户名或密码错误");
        } else {
          console.error("TOKEN过期，请重新登录");
          router.push("/login");
        }
        break;
    }
    return Promise.reject(error);
  }
);

完成上述优化后，就可以将LoginView中接口调用的方式改写了。

<script setup>
import { reactive } from "vue";
import { loginApi } from "../apis/user";

const formState = reactive({
  username: "",
  password: "",
});

const login = () => {
  loginApi(formState.username, formState.password).then((val) => {
    console.log(val);
  });
};
</script>

再次重启前端项目，输入用户名、密码后，点击【登录】按钮后，控制台可以看到打印出的具体的请求内容了。

到这里，前端登录接口已经对接完毕了，项目中所有的接口都是按这个步骤进行对接的，当然接口对接后，还有很多逻辑要进行完善，但是权限控制（包括登录、用户管理等）并不是接口测试平台的核心，核心在于接口测试的业务逻辑，所以通过登录页面和接口只是简单将整个前后端逻辑对接起来。后面的章节会将权限控制模块先放放，优先开始核心功能的开发，等核心功能基本完成后，再来完善平台的权限控制等模块。