Axios-module: interceptor not waiting for a re-request

[gammpamm]

I have changed the interceptor from the nuxt config to plugin. In the plugin the returned response from re-request is too late to update in Vue template. How can i fix this?

axios-module v4 working:

axios: {
    responseInterceptor: async (response, { store, redirect }) => {
      if (response.status === 266) {
        const originalRequest = response.config
        originalRequest.baseURL = ''
        originalRequest._retry = true
        const refresh = await store.dispatch('refreshToken')
        if(refresh) {
          originalRequest.headers['Authorization'] = `Bearer ${store.getters.token}`
          return axios(originalRequest)
        } else {
          redirect(301, '/account/login')
        }
      }
      return response
    },
}

axios-module v5 plugin axios.js return data too late:

export default function ({ $axios, redirect, store }) {
  $axios.onResponse(response => {
    if(response.status === 266) {
      const originalRequest = response.config
      originalRequest.baseURL = ''
      originalRequest._retry = true
      store.dispatch('refreshToken').then(result => {
        if(result) {
          originalRequest.headers['Authorization'] = `Bearer ${store.getters.token}`
          $axios(originalRequest).then(data => {
            return data
          })
        } else {
          redirect(301, '/account/login')
        }
      }).catch(err => console.log(err))
    }
  })
}

_{This question is available on Nuxt.js community (#c74)}

[pi0]

Hi. I think we need to await on interceptor.

export default function ({ $axios, redirect, store }) {
  $axios.onResponse(async response => {
    if (response.status === 266) {
      const originalRequest = response.config
      originalRequest.baseURL = ''
      originalRequest._retry = true
      const result = await store.dispatch('refreshToken')

      if (result) {
          originalRequest.headers['Authorization'] = `Bearer ${store.getters.token}`
          return $axios(originalRequest)
      } else {
          redirect(301, '/account/login')
      }

    }
  })
}

[gammpamm]

Thx now works.

export default function ({ $axios, redirect, store }) {
  $axios.onResponse(async response => {
    if(response.status === 266) {
      const originalRequest = response.config
      originalRequest.baseURL = ''
      originalRequest._retry = true
      const newToken = await store.dispatch('refreshToken')
      if(newToken) {
        originalRequest.headers['Authorization'] = `Bearer ${newToken}`
        return $axios(originalRequest)
      } else {
        redirect(301, '/account/login')
      }
    }
    return response
  })
}

[pi0]

Your welcome :) BTW your example is so nice that worth adding to Wiki pages or README.

[Mothirajha]

@pi0 @manniL
In Safari,

originalRequest.headers['Authorization'] = Bearer ${newToken} is not getting updated with new token
also tried with custom header
originalRequest.headers['Authorization-Bearer'] = Bearer ${newToken}

But still not working. Any solution for it ??