用户过期及时中断后续请求

场景:token过期或者账号被挤

问题:在相应拦截器里面配置了弹框提示信息,当你进行一步操作时,你没有权限操作了,此时相应拦截器会触发给你一个弹窗,但是你这一步操作设计了多个请求的话,弹窗就会弹很多个,因此需要中断请求,在第一次弹窗的时候就中断后续请求

响应拦截器代码附上

// 响应拦截器
Sever.interceptors.response.use((response) => {
  if (response.data.code !== 200) {
    alert(response.data.data.msg)
  }
  return response
}, (error) => {
  return Promise.reject(error)
})

通过Axios官网可以看到有两种请求取消的方式我推荐使用这种(CancelToken )Axios官网地址附上

 但是官网上做的请求是针对一个的,而目前是有多个请求.因此我们需要借用一下vuex

export default new Vuex.Store({
  state: {
    axiosCancelArr: []
  },
  mutations: {
    AddCancel (state, cancel) {
      state.axiosCancelArr.push(cancel.cancelToken)
    },
    RemoveCancel (state) {
      state.axiosCancelArr.forEach(item => {
        item && item()
      })
      state.axiosCancelArr = []
    }
  },
  actions: {
    pushCancel ({ commit }, cancel) {
      commit('AddCancel', cancel)
    },
    clearCancel ({ commit }) {
      commit('RemoveCancel')
    }
  }
})

请求拦截器+相应拦截器+路由拦截设计附上

// 请求拦截器
Sever.interceptors.request.use((config) => {
  config.cancelToken = new axios.CancelToken(cancel => {
    store.dispatch('pushCancel', { cancelToken: cancel })
  })
  return config
}, (error) => {
  return Promise.reject(error)
})

// 响应拦截器
Sever.interceptors.response.use((response) => {
  if (response.data.code === 401) {
    alert(response.data.msg)
    store.dispatch('clearCancel')
  }
  return response
}, (error) => {
  return Promise.reject(error)
})

// 路由拦截
router.beforeEach((to, from, next) => {
  store.dispatch('clearCancel')
  next()
})
export default Sever

原理:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

我的设计就是把cancel函数当做参数,借用vuex来找到错误请求的那一个节点,错误之后就会被响应拦截器拦截执行取消请求的操作,后续的每一次错误请求都会被响应拦截器捕获从而取消请求