axios登录，登出接口的简单封装步骤详解！

---

总结

封装axios对象，编写公共请求代码、添加拦截逻辑、然后分层实现axios请求的调用！

一、步骤

1.安装Axios：

• 首先，确保你的项目中已经安装了Axios。如果没有安装，可以通过以下命令安装Axios：

npm install axios
1

2.axios对象封装

• 创建一个名为request.js的文件，用于封装Axios对象。

import axios from 'axios'
import { Message } from 'element-ui'
import {tokenStore} from "@/store/store";

// 创建一个 Axios 实例
const axiosInstance = axios.create({
    baseURL: 'http://localhost:8080/qy', // 通用后端 Url 地址
    timeout: 5000, // 请求最大等待时间,
    headers: { 'Content-Type': 'application/json' },
})

// 添加请求拦截器
axiosInstance.interceptors.request.use(
    (config) => {
        // 获取请求的URL
        const requestUrl = config.url;
        console.log(requestUrl);
        // console.log(config);
        // 提取URL路径部分/qy/Login
        // const urlPath = new URL(requestUrl).pathname;

        // 如果是post请求将参数data转成json字符串
        // 检查请求方法是否为 POST
        if (config.method === 'post' || config.method === 'POST') {
            // 将请求数据转换为 JSON 字符串
            config.data = JSON.stringify(config.data);
            // 设置请求头的 Content-Type
            // config.headers['Content-Type'] = 'application/json';
        }

        // 在请求头中添加令牌信息
        const jwtToken = tokenStore().jwtToken // 从pinia中获取令牌

        // 检查是否是登录请求，这里假设登录请求的URL是 '/Login'
        if (requestUrl !== '/Login' && requestUrl !== '/LogOut') {
            console.log(requestUrl);
            // 如果不是登录请求，添加令牌到请求头
            if (jwtToken) {
                config.headers.Authorization = `${jwtToken}`
            }
        }
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

//添加响应拦截器
axiosInstance.interceptors.response.use((response) => {
    var res = response.data
    // console.log(res);
    // 设置请求状态弹窗提示
    if (res.status == 200) {
        //请求成功提示
        Message.success(res.msg);
    } else {
        Message.error(res.msg);
    }
    // 后端响应Resbody的data数据
    return res
},
    (error) => {
        return Promise.reject(error)
    }
)


export default axiosInstance
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

3.请求api封装

• 创建一个api.js文件，默认导入封装好的axios对象

import axiosInstance from "@/request/request"

export function login(data) {
    return axiosInstance({
        url : "/Login",
        method : "POST",
        data
    })
}

export function logOut() {
    return axiosInstance({
        url : "/LogOut",
        method : "get",
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.使用pinia临时库保存响应信息（按需求用）

// 导入pinia库
import { defineStore } from 'pinia';
// 导入api
import { login } from '@/request/api/system';
import { logOut } from '@/request/api/system';
// 导入jwt解析器
import jwtDecode from "jwt-decode";
// 导入默认导出的路由对象用于跳转路由
import router from '@/router/router';

export const tokenStore = defineStore({
  id: 'myStore',
  state: () => ({
    jwtToken: null,
    user_name: null,
    user_name_id: null,
    user_type: null,
  }),
  actions: {
    doLogin(params) {
      login(params).then((res) => {
        if (res.status == 200) {
          const jwtToken = res.data; // 从响应中获取JWT
          // console.log(jwtToken);
          this.jwtToken = jwtToken; // pinia存储JWT
          localStorage.setItem("jwtToken", jwtToken);
          console.log(this.user_name);

          // 解码JWT令牌以获取载荷信息
          const decodedToken = jwtDecode(jwtToken);
          console.log(decodedToken);

          //访问包含在JWT令牌中的用户信息
          //保存用户类型的id便于门诊医生问诊
          var user_name_id = decodedToken.user_name_id;
          //保存用户类型至本地便于控制导航栏的显示与隐藏
          const userType = decodedToken.user_type;
          this.user_name_id = user_name_id;
          console.log(this.user_name_id);

          this.user_type =
            userType == 1
              ? "系统管理员"
              : userType == 2
              ? "挂号员"
              : "门诊医生";
          //跳转到主页
          router.push("/index");
        }
      });
    },
    LogOut() {
      return logOut();
    }
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

5.最后，在组件中使用！

• 点击事件如下

submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //将登陆用户名赋给store管理实现共享
          this.tokenStore.user_name = this.userForm.userName;
          //调用axios对象的get发送请求
          this.tokenStore.doLogin(this.userForm)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

LogOut() {
      // 删除所有本地缓存包括令牌信息
      // localStorage.clear();
      this.tokenStore.LogOut().then((res) => {
        if (res.status == 200) {
          // 删除所有本地缓存包括令牌信息
          localStorage.clear();
          // 跳转到登录页面
          this.$router.push({ path: "/Login" });
        }
      });

      // localStorage.removeItem("user_name");
      // localStorage.removeItem("user_type");
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15