Vue项目配置axios拦截器

1. 引入依赖

yarn add axios

2. 创建plugins/axios.js文件

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

axios.defaults.baseURL = 'http://localhost:8080'

const request = axios.create({
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
    }
})
request.interceptors.request.use(config => {
    config.headers['Authorization'] = localStorage.getItem('token');
    return config;
})
request.interceptors.response.use(response => {
    if (response.data.code === 200) {
        return response
    } else {
        Element.Message.error(response.data.msg ? response.data.msg : '系统异常！', {duration: 3 * 1000})
        return Promise.reject(response.data.msg)
    }
}, error => {
    console.log(error)
    if (error.data) {
        error.message = error.response.data.msg
    }
    if (error.status === 401) {
        router.push("/login")
    }
    Element.Message.error(error.message, {duration: 3 * 1000})
    return Promise.reject(error)
})
Vue.prototype.$axios=request;

3. 主函数main.js引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

//elementUI
import './plugins/elementUI'
//axios请求
import  './plugins/axios'
//全局样式
import './assets/css/main.css'
//mockjs
import './plugins/mock'

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app') import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = false//elementUIimport './plugins/elementUI'//axios请求import  './plugins/axios'//全局样式import './assets/css/main.css'//mockjsimport './plugins/mock'new Vue({    router,    store,    render: h => h(App)}).$mount('#app')import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falseimport './plugins/elementUI'import './plugins/axios'import './assets/css/main.css'//引入mockjsimport './plugins/mock'new Vue({    router,    store,    render: h => h(App)}).$mount('#app')