axios request和response拦截器

main.js

axios.interceptors.request.use(config => {
    if(store.state.token){
      var str = store.state.token;
      
      // config.headers.common['Authorization']='JWT '+str;
      config.headers.Authorization=`JWT ${str}`
  
    }
    return config;
  }, error => {
  // 对请求错误做些什么
    return Promise.reject(error);
  });
// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {

    if (error.response) {
    
      switch (error.response.status) {
        case 401:
            axios.get('/api/users/quit',{params:{'time_uuid':store.state.timeUUid}}).then(res => {
              //清空储存登录时间开始
              
              store.commit('del_token','');
              store.commit('del_timeUUID','');
              //清空储存登录时间结束
              
            }).then(res => {
                Message({duration:1000,message:'请重新登录,正在前往登录页...',type:'warning',onClose:res =>{
                  router.replace({
                    path: '/login',
                    query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
                  })
                }})         
            })
          break;
            
      }
    }
    return Promise.reject(error.response.data)
  })

2020/4/30 新项目的需求对于拦截器响应器的封装优化
main.js
对于请求拦截器当中对于headers的设置中 Content-Type的设置要求为如果请求当中设置Content-Type值则以页面中的请求参数为准，否则为默认的application/json

// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(config => {
  if(store.state.xaiot_token){
    if(config.method === 'post'){
      config.headers['usid']=`${store.state.xaiot_token}`
      if(config.headers['Content-Type'] === undefined)
        config.headers['Content-Type']='application/json'
      else 
        config.headers['Content-Type']=config.headers['Content-Type']
      if(config.headers['Accept'] === undefined)
        config.headers['Accept']='application/json'
      else
        config.headers['Accept']=config.headers['Accept']
    }
  }
  return config;
}, error => {
// 对请求错误做些什么
  return Promise.reject(error);
});

后端给的响应数据当中返回的数据外面都是报过了一层status=200的 意味着所有的信息包括报错的token超时等等各类信息都会是status200内的data信息，而我封装响应拦截器的时候给默认的认为是接口请求错误的因为接口正常的状态码和token信息的一些特殊的code是确定的，界面其他人对接api的时候不仅判断了code=‘0000’（正常请求接口）的情况还在else if（code ！==‘0000’）里面判断了不是正常请求接口时候的弹框，这样两者的判断范围有交叉，就会弹两次框提示，最后我们就要做到如果如果类似于接口请求错误这样的反馈我们就 让他在页面走不下去，直接走catch方法，就避免了重复弹框的问题，

// http response 拦截器
axios.interceptors.response.use(
  response => {
    let response_Result=response
    if(response_Result.data.code){//导出这类接口没有code success
      switch (response_Result.data.code) {
        case '0000'://请求成功不管  要想谈成功提示框可以在界面进行提示   接口访问和读取数据正常
          return response_Result
        case '10011'://10011   请检查登录是否携带token
            message({duration:1000,message:response_Result.data.msg,type:'error',onClose:res =>{
              //清空token并跳转
              localStorage.clear()
              sessionStorage.clear()
              router.replace({
                path: '/login',
                query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
              })
            }})
            response_Result.data={}
            return response_Result
        case '10012':// 10012   token不能为空
            message({duration:1000,message:response_Result.data.msg,type:'error',onClose:res =>{
              //清空token并跳转
              localStorage.clear()
              sessionStorage.clear()
              router.replace({
                path: '/login',
                query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
              })
            }})
            response_Result.data={}
            return response_Result
        case '10013':// 10013   会话超时，需重新登录
            message({duration:1000,message:response_Result.data.msg,type:'error',onClose:res =>{
              //清空token并跳转
              localStorage.clear()
              sessionStorage.clear()
              router.replace({
                path: '/login',
                query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
              })
            }})
            response_Result.data={}
            return response_Result
        case '10014':// 10014   当前用户无权限内容
          message({duration:1000,message:response_Result.data.msg,type:'error'})   
          response_Result.data={}
          return response_Result
        case '10015':// 10015   当前用户权限获取失败
          message({duration:1000,message:response_Result.data.msg,type:'error'})   
          response_Result.data={}
          return response_Result
        default :  
          //默认接口请求报错  除code值为0000/10011/10012/10013/10014/10015之外  默认走这块 
          //先将默认接口给返回的信息msg获取到，用于做提示框信息，然后给准备返回的response数据其他全部滞空，将status修改为40001
          //这样接口就直接在第一个if判断code或者msg或者success字段时直接抛异常走catch方法 
          //就可以将页面当中其他员工写的请求接口错误的弹框信息和拦截器的判断重叠多次弹相同信息的问题完美解决
          let message_content = response_Result.data.msg
          response_Result={
            status:40001
          }
          message({duration:1000,message:message_content,type:'error'})   
          return response_Result
      }
    }
    return response_Result
  },
  error => {
    debugger
    if (error.response) {
      switch (error.response.status) {
        case 401:
            message({duration:1000,message:'请重新登录,正在前往登录页...',type:'warning',onClose:res =>{
              //清空token并跳转
              localStorage.clear()
              sessionStorage.clear()
              isShowMessage=true
              router.replace({
                path: '/login',
                query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
              })
            }})      
          break;
      }
    }
    return Promise.reject(error)
  })