vue 使用axios拦截请求和响应

首先创建一个http.js文件

// http.js
import axios from 'axios';
import Vue from 'vue';

const http = axios.create({
    baseURL: 'http://localhost:8888/admin/api'
});

响应拦截器

// axios 响应拦截器全局处理报错 
import router from './router';
http.interceptors.response.use(
    res => {
        return res;
    },
    err => { 
        if (err.response.data.returnStr) {
            Vue.prototype.$message.error(err.response.data.returnStr);
        }
        // 约定 401 是用户未登录，用户不存在 或token异常的情况
        if (err.response.status === 401) {
            router.push('/login');
        }
        return Promise.reject(err);
    }
);

请求拦截器

// axios 请求拦截器全局处理请求加上token
http.interceptors.request.use(
    config => { 
        if (localStorage.token) { 
            config.headers.Authorization = 'Bearer ' + localStorage.token;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);

导出配置

export default http;

挂载axios

import $http from './http';
Vue.prototype.$http = $http;