[Interceptors] Resend failed request after Refresh Token

// Attach the token on every request
Vue.http.interceptors.push((request, next) => {
    let token = Cookies.get('jwt.token')

    if (token) {
        request.headers = request.headers || {}
        request.headers.Authorization = `Bearer ${token}`
    }

    next()
})

// Attempts to refresh the token
Vue.http.interceptors.push((request, next) => {
   next((response) => {
        if (response.status === 401) {

           return Authentication.refresh().then((result) => {
                Cookies.set('jwt.token', result.data.token)
                request.headers.Authorization = `Bearer ${result.data.token}`

                return Vue.http(request).then((data) => {
                    return data
                })

            }).catch(() => {
                Authentication.logout()
                return router.go({name: 'login'})
            })
        }
    })
})

Everything is working fine, the token is being attached on every request and it can be refreshed.

The problem is when it tries to make the failed request(s) after it gets the new token, the request is indeed made but the response is not “passed to the vm?” so it gets always in the loading state. If I manually refresh the page it works fine.

Is there something that I am missing or is my logic/flow wrong?

PS: I think an example of a generic refresh token flow would be a good addition to the code recipes section.

[hfalucas]

@williamokano Yes the Authentication.refresh() is returning a promise 😃

export default {
    // (..)
    refresh () {
        return Vue.http.get(`${API}/v1/refresh-token`)
    }
}

[vanslly]

@james2doyle That will log the user out when the original request returns an error status code like HTTP 500, instead use onrejected callback instead.

So…

// outside state that lets us know if we need to refresh or not
let allowRefresh = true;

Vue.http.interceptors.push((request, next) => {
  next((response) => {
    // are we allowed to refresh AND is this a 401?
    if (allowRefresh && response.status === 401) {
      // we can only allow them to refresh once,
      // so turn this toggle off so they will be redirected if
      // the refresh response is also a 401
      allowRefresh = false;
      return auth.refresh().then(result => {
        auth.setToken(result.data.token)
        auth.setRefreshToken(result.data.refresh_token)
        request.headers.set('Authorization', `Bearer ${result.data.token}`)

        return Vue.http(request).then(data => {
          return data
        })
      }, () => {
        auth.logout()
        return router.push('/login')
      })
    }
  })
})

That way the original error handler for the original request will handle the error for the original request.