关于Vue项目实战中axios拦截器的使用场景

1、request拦截器

request拦截器在前端发起异步的axios请求时会进行一个拦截，并且我们可以修改这个请求

2、response拦截器

response拦截器是在后端发起异步axios请求返回时进行一个拦截，一般用于修改信息

3、axios拦截器的使用场景

1、在每一个请求路径中都需要添加“http:localhost:8080/”，我们可以在设置axios 的默认请求路径

2、在访问需要认证身份的后端接口时需要在请求头中添加token，我们可以在axios的前置拦截去统一处理

3、如果登录失败，我们是需要弹窗显示错误的，比如验证码错误，用户名或密码不正确等。不仅仅是这个登录接口，所有的接口调用都会有这个情况，所以我们可以做个axios的后置拦截，对返回的结果进行分析，如果是异常就直接弹窗显示错误，这样我们就省得每个接口都写一遍了。

4、实战代码分析

import axios from "axios";
import router from "./router";

// 设置了默认请求前置路径
axios.defaults.baseURL = "http://localhost:8881"

const request = axios.create({
    timeout: 5000,
    // 表示headers是一个json数据的header
    headers: {
        'Content-Type': "application/json; charset=utf-8"
    }
})

// request前置拦截
// 每次请求都附带上我们header的Authorization
request.interceptors.request.use(config => {
    config.headers[`Authorization`] = localStorage.getItem("token")
    return config
})

// 状态码为401代表权限不够，404代表没有这个接口
request.interceptors.response.use(response => {
        let res = response.data;
        if (res.code === 200) {
            // 状态码正常就返回请求继续执行
            return response;
        } else {
            Element.Message.error(!res.msg ? '系统异常' : res.msg);
            // 报错就不应该在走到下一步了
            // 返回拒绝请求并附带上异常信息
            return Promise.reject(response.data.msg);
        }
    },
    // 返回请求的状态码
    error => {
        //其他的异常
        if (error.response.data){
            error.message = error.response.data.msg
        }
        // 没有权限
        if (error.response.status === 401) {
            router.push("/login")
        }
        Element.Message.error(error.massage, {duration: 3000})
        return Promise.reject(error)
    }
)

export default request

default.baseUrl可以为我们全局发起的axios请求路径进行修改，举个栗子：

axios.defaults.baseURL = "http://localhost:8881"

我们发送这样一个路径 this.$axios.post("/userInfo")，但是实际上发出去的是这样一个请求 ：“http://localhost:8881/userInfo”
前置拦截，其实可以统一为所有需要权限的请求装配上header的token信息，后置拦截中，判断status.code和error.response.status，如果是401未登录没权限的就调到登录页面，其他的就直接弹窗显示错误。

5、使用axios拦截器方法

我们在src目录下创建axios.js文件
我们要在main.js中删除原来导入的import axios from “axios”;因为在axios.js中已经引入

import axios from './axios'
Vue.prototype.$axios = axios // 全局使用axios库