Global http response error handling in vue/axios with vuex

Question

I\'m trying to fix a behavior in my VueJS SPA wherein a limbo state arises. The app doesn\'t know the JWT has already expired and therefore presents itself as if the user is sti

Answer 1

What about direct import your store to ApiClient.js? Something like

const axios = require('axios')
import store from 'path/to/store'

const errorHandler = (error) => {
if (error.response.status === 401) {
  store.dispatch('user/logout') // now store should be accessible
}
  return Promise.reject({ ...error })
}


export default class API {
  constructor(options) {
    this.options = Object.assign({ basePath: '' }, options)
    this.axios = axios.create({ timeout: 60000 })
    this.axios.interceptors.response.use(
      response => response,
      error => errorHandler(error)
    )
  }
  // ...
}