axios拦截器已经封装好，需要单独在页面接口重新赋值新的token

处理方式：

在入口文件main.js里引入封装好的axios拦截器

import axios from './utils/request'

Vue.prototype.$http = axios

页面使用

 this.$http({

              headers: {

                'x-Authorization': storage.get('logoutToken')

              },

              url: '/users/login',

              method: 'delete',

              data: { exit_time: storage.get('logoutTime') }

            }).then(res => {

            })

这样就可以任意定义了

拦截器封装的api接口函数页面使用方式：

import request from '@/utils/request'

// 退出登录

export function loginOut(query) {

  return request({

    url: '/users/login',

    method: 'delete',

    data: query

  })

}

utils的request文件里封装的拦截器如下：

里面会处理ie浏览器缓存的不请求接口的问题，还有token到期后，接口重新返回新的token重新赋值的问题

import axios from 'axios'

import store from '@/store'

import { getToken, setToken } from '@/utils/auth'

import Vue from 'vue'

import router from '@/router'

import 'babel-polyfill'

import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()

Es6Promise.polyfill()

// create an axios instance

const request = axios.create({

  baseURL: process.env.VUE_APP_BASE_API,

  timeout: 10 * 1000 // request timeout

})

axios.defaults.headers.delete['Content-Type'] = 'application/json;charset=UTF-8';

// 异常拦截处理器 成功1 失败0 错误 -1

const errorHandler = (error) => {

  if (error) {

    const data = error.data

    const token = store.getters.token

    switch (error.status) {

      case 403:

        Vue.prototype.$notify({

          message: 'Forbidden',

          type: 'error',

          description: data.message

        });

        break;

      case 401:

        // 测试注释后就可以 禁止401后跳转登录页

        if (!(data.result && data.result.isLogin)) {

          if (token) {

            // 退出登录跳转

            store.dispatch('user/resetToken').then(() => {

              setTimeout(() => {

                window.location.reload()

              }, 100)

            })

          }

        }

        break;

      case 308:

        Vue.prototype.$notify({

          message: '密码到期',

          type: 'error'

        })

        router.replace('/editPwd')

        break;

      case 307:

        Vue.prototype.$notify({

          message: '授权到期',

          type: 'error'

        })

        break;

      case 500:

        Vue.prototype.$notify({

          message: '网络错误，请稍后重试',

          type: 'error'

        })

        break;

    }

  }

  return Promise.reject(error)

}

// request interceptor 请求拦截器

request.interceptors.request.use(

  config => {

    // do something before request is sent

    if (store.getters.token) {

      config.headers['x-Authorization'] = getToken()

      // 时间戳，解决ie浏览器请求一次，不请求,获取缓存的bug

      var timeArs = parseInt(new Date().getTime() / 1000) + ''

      if (config.method === 'get') {

        // `${config.url}?${timeArs}`,

        /* get 接口 在 IE11 中，如果 GET 请求相同的 URL ，浏览器默认会使用之前的缓存数据，而不是重新请求接口，导致页面数据没有更新 */

        config.params = {

          _t: timeArs,

          ...config.params

        }

      }

    }

    return config

  }, errorHandler)

// response interceptor 响应拦截器

request.interceptors.response.use(

  res => {

    // 获取接口返回的请求头中新添加的token，更新本地的token

    if (res.headers['x-authorization']) {

      // 定义赋值新的token

      const newToken = res.headers['x-authorization']

      // 更新新的token

      setToken(newToken)

      // 再发请求 request(res.config)  清空之前的baseURL否则会多一层

      res.config.baseURL = ''

      return request(res.config)

    }

    if (res.headers['content-disposition'] !== undefined) {

      return res

    } else {

      if (res.status === 200) {

        return Promise.resolve(res.data)

      } else {

        return Promise.reject(res.data)

      }

    }

  },

  error => {

    const { response } = error;

    if (response) {

      // 请求已发出，但是不在2xx的范围

      errorHandler(response)

    }

  })

export default request