7.怎么配置一个axios来拦截前后端请求

努力学习的小宇同学2024-08-04 22:08

首先创建一个axios.js文件

导入我们所需要的依赖

复制代码

import axios from "axios";
import Element from 'element-ui'
import router from "./router";

设置请求头和它的类型和地址

注意先注释这个url,还没有解决跨域问题,不然会出现跨域

复制代码

// axios.defaults.baseURL = "http://localhost:8081"
const request = axios.create({
    timeout: 5000,
    headers: {
//请求头的格式要求为json
        'Content-Type': 'application/json; charset=utf-8'
    }
})
request.interceptors.request.use(config => {
//将localStorage中的token放入请求头
    config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上token
    return config
})

设置后端返回给前端数据的处理方式

复制代码

//就是当后端返回给前端code的值来回馈不同的效果
request.interceptors.response.use(response => {
        let res = response.data;
        console.log("response")
        console.log(res)
        if (res.code === 200) {
            return response
        } else {
            Element.Message.error(res.msg? res.msg : '系统异常！', {duration: 3 * 1000})
            return Promise.reject(response.data.msg)
        }
    },
    error => {
        console.log(error)
        if(error.response.data) {
            error.message = error.response.data.msg
        }
        if(error.response.status === 401) {
            router.push("/login")
        }
        Element.Message.error(error.message, {duration: 3 * 1000})
        return Promise.reject(error)
    }
)

将他暴露出来

复制代码

export default request

然后在main.js中修改

复制代码

import axios from 'axios'
Vue.prototype.$axios = axios //

修改为

复制代码

import request from "./axios";
Vue.prototype.$axios = request

就可以了