vue中axios请求拦截器和响应拦截器_vue使用axios调用后端接口写请求拦截器以及响应拦截器

vue框架下的index.js文件

第一部分

import Axios from "axios"
//qs是参数序列化的插件
import qs from "qs"
import Vue from "vue"
//localOrSessionStorage.js文件中的setSessionStore, getSessionStore实现对token和refreshToken存储和获取
//需要说明的是这里的token和refreshToken都是后端返回的结果，首次请求时返回的结果，浏览器的控制台的application可以说明
import { setSessionStore, getSessionStore } from "@/common/js/localOrSessionStorage.js"
1
2
3
4
5
6
7

第二部分

//通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
const baseURL = process.env.API_HOST

// 创建一个axios实例
const service = Axios.create({
    baseURL: baseURL,
    timeout: 50000000,
    header: {},
})
1
2
3
4
5
6
7
8
9

第三部分

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    if(getSessionStore("smsCodeToken")) {
        config.headers["smscodetoken"] = getSessionStore("smsCodeToken");
    }
    if(getSessionStore("refreshToken")) {
        config.headers["refreshtoken"] = getSessionStore("refreshToken");
    }
    if(getSessionStore("Token")) {
        config.headers["token"] = getSessionStore("Token");
    }
    console.log("请求头config.headers：", config.headers);
    console.log("请求头config：", config);
    return config;
}, function (error) {
    return Promise.reject(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

请求的拦截的主要作用是，项目中首次登陆时，后端返回的token和refreshToken前端会将其存储起来，接下来的每一次请求时，后端