VUE-axios统一增加请求头并根据接口返回的状态码判断用户登录状态并跳转登录页

背景：后台接口返回code==501表示用户是未登录状态，需要登录才可访问；

main.js中通过http拦截做路由跳转

import Vue from 'vue'
import Axios from 'axios'
Vue.prototype.$axios = Axios
import { Loading, Message, MessageBox } from 'element-ui'
// 超时时间
Axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
Axios.interceptors.request.use(config => {
  config.headers.common ={
    'Content-Type': "application/x-www-form-urlencoded",
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Headers':'X-Requested-With,Content-Type',
    'Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS',
    'user-id': library.getData("id")==undefined?'':library.getData("id")
  }
  // element ui Loading方法
    loadinginstace = Loading.service({ fullscreen: true })
  return config
}, error => {
  loadinginstace.close();
  Message.error({
    message: '网络不给力,请稍后再试'
  })
  return Promise.reject(error)
})
//http响应拦截器
Axios.interceptors.response.use(data => {
  // 响应成功关闭loading
  loadinginstace.close();
  const code = data.data.code;
  if(code == 501) { //未登录
    MessageBox.alert('请先登录', '提示', {
      confirmButtonText: '确定',
      callback: action => {
        router.replace({
          name: 'login',
          // query: {redirect: router.currentRoute.fullPath} //登录后再跳回此页面时要做的配置
        })
      }
    });
  }
  return data
}, error => {
  loadinginstace.close();
  Message.error({
    message: '网络不给力,请稍后再试'
  })
  return Promise.reject(error)
})

解决vue axios的封装 请求状态的错误提示问题

Vue全局loading及错误提示的思路与实现

vue - axios 请求统一增加请求头