vue2中axiso的请求拦截封装

在src文件下新建axios的配置文件，我这里直接命名axios.js，然后配置

//导入axios和router

import axios from "axios";

import $router from '@/router/index';

//引用elenmentui的组件

import { Message } from 'element-ui'

import { Loading } from 'element-ui'

let loadingInstance = null

// 全局配置axios，并使用ajax作为别名

const instance = axios.create({

    timeout: 3000,

    responseType: 'json',

    //公共地址

    baseURL: "http://127.0.0.1:8081",

    responseEncoding: 'utf8'

});

// 添加请求拦截器

instance.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么

    loadingInstance = Loading.service({ fullscreen: true })

    // 配置 Token 认证

    if (localStorage.token !== '') {

        config.headers.Authorization = localStorage.getItem("token")

    }

    console.log(config)

    return config;

}, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

});

//添加响应拦截器

instance.interceptors.response.use(function (response) {

    // 2xx 范围内的状态码都会触发该函数。

    // 对响应数据做点什么

    loadingInstance.close()

    return response;

}, function (error) {

    // 超出 2xx 范围的状态码都会触发该函数。

    // 对响应错误做点什么

    if (error.response.status === 401) {

        // 无效的 token

        // 把 Vuex 中的 token 重置为空，并跳转到登录页面

        $router.push('/login')

        // 弹窗提示

        Message.error('用户身份已过期，请重新登录!')

    }

    return Promise.reject(error);

});

export default instance

在main.js全局配置

import instance from "./axios";

// 全局配置axios，并使用ajax作为别名

Vue.prototype.ajax = instance

node.js配置请求头