Best practices for handling 401 about axios-module HOT 5 CLOSED

@andreliem Thanks for your suggestion actually context was available using this (Like this.store) but it was inconsistent with other use cases, so I've made context available as second argument (In 4.2.1) (docs).

Anyway, i agree with you. writing logic in the config is not a good idea, using middleware (Or plugins) is much better.

from axios-module.

I'm using auth module

export default function ({ $axios, store, redirect }) {
  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status)
    if (code === 503) {
      redirect('/maintenance')
    }
    if (code === 403) {
      redirect('/404')
    }
    if (code === 401) {
      store.$auth.logOut()
    }
  })
}

I added this in axios plugin work fine looking for better practice.

from axios-module.

I also tried using the errorHandler function to detect 401, which is working... but it seems like the store is not accessible from this function.

from axios-module.

Oh actually using middleware on its own without interceptors proved to be a good solution for me.

In case anyone is curious, I'm trying to set the session state of a user in the store before components load as I want specific components to hide/show content based on the store. Just redirecting to a login page isn't the UX I was looking to do.

export default async function ({ store }) {
    const authenticatedUser = await store.dispatch('authCheck')
    if (authenticatedUser) {
      store.dispatch('loginUser', authenticatedUser)
    } else {
      store.dispatch('logoutUser')
    }
}

from axios-module.

Thanks @pi0. Good to know there is the context available for 4.2.1 in the error handler, I actually think it's a pretty decent location to have logic which dispatches actions to the store when errors like session expiry occur... as opposed to having each component handle the error or through some global mixin perhaps.

from axios-module.