Token过期导致页面多个请求报错提示多次

关于Token过期导致页面多个请求报错提示的问题

我们先在全局定义一个变量（global.js）来控制token是否过期

export default {
  // token无效标记
  TokenInvalidFlag:false
}

在路由拦截器里引入变量来判断是否过期进行判断

//request.js
import axios from 'axios'
import { Message } from 'element-ui'
import store from '../store'
import route from '../router'
import global from '@/utils/const/global'
// create an axios instance
const service = axios.create({
  baseURL: '/', // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 1000 * 60 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    const token = `${store.state.user.token}`

    if (token) config.headers['Authorization'] = `Bearer ${token}`

    config.headers['sn-common'] = `version=v2&app=20200902&channel=web_admin`
    store.commit('handleLoading',true);
    // get参数编码
    if (config.method === 'get' && config.params) {
      let url = config.url
      if (url.indexOf('?') === -1) {
        url += '?'
      } else {
        url += '&'
      }
      const keys = Object.keys(config.params)
      for (const key of keys) {
        if (config.params[key] !== undefined && config.params[key] !== '') {
          url += `${encodeURIComponent(key)}=${config.params[key]}&`
        }
      }
      url = url.substring(0, url.length - 1)
      config.params = {}
      config.url = url
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    if (response.data.code === -22) {
      if(global.TokenInvalidFlag===false){
        Message.error('登录态失效，请重新登录！');
        global.TokenInvalidFlag = true;
        store.dispatch('user/signOut').then(() => {
          route.push({ name: 'login', params: {redirectFlag: true} })
        })
      }
    } else if (response.status !== 200) {
      Message.error(response.message || 'Error')
    }else{
      global.TokenInvalidFlag = false
    }
    // 如果是java服务
    if(response.config.url.indexOf('/java/api') != -1) {
      if (response.data.code != 0) {
        Message.error(response.data.message || 'Error')
      }
    }
    store.commit('handleLoading',false);
    // Cannot read property 'data' of undefined
    return response.data
  },
  error => {
    if (error.response.status === 401) {
      if(global.TokenInvalidFlag===false){
        Message.error('登录态失效，请重新登录！')
        store.dispatch('user/signOut').then(() => {
          route.push({ name: 'login', params: {redirectFlag: true} })
        });
        global.TokenInvalidFlag = true;
      }

    } else {
      Message({
        message: error.response.data.error_message,
        type: 'error',
        duration: 5 * 1000
      })
    }
    store.commit('handleLoading',false);
    return Promise.reject(error)
  }
)

export default service