JSON Web Tokens expire pretty regularly. That's kind of what they are made for. But our API calls shouldn't fail because of it. So we need an interceptor who deals with this.

When working with Vue, I prefer to use JWT for the authentication between my frontend and the Symfony backend. As http client library I use axios. axios provides basically everything I need out of the box, except a way to retry a call.

What we need is an interceptor which caches errors on the API when the token has expired. It should then use the refresh token (also generated on login), call the API to refresh the token and and try exactly the previous API call again.

All responses from axios are promises. Therefore we have to make sure to return a promise back from the interceptor. I use es6-promise as there is no "native" version in Vue yet.

Our process looks the following:

  • A successful response should just be returned
  • In case of an error we check the status code
    • If it's not a 401 status code, we pipe the error back to the services that it can be handeled there
    • If it's a 401 and it was a try to refresh the token, we log the user out
    • If it's a 401 and we get an indication, that the user is locked, we log the user out
    • In any other case we try to get a new token and call the request again with the new token
import axios from 'axios';
import { Promise } from "es6-promise";
import { TokenStorage } from "./token-storage";
import { router } from '../app';

export default () => {

  axios.interceptors.response.use( (response) => {
    // Return a successful response back to the calling service
    return response;
  }, (error) => {
    // Return any error which is not due to authentication back to the calling service
    if (error.response.status !== 401) {
      return new Promise((resolve, reject) => {
        reject(error);
      });
    }

    // Logout user if token refresh didn't work or user is disabled
    if (error.config.url == '/api/token/refresh' || error.response.message == 'Account is disabled.') {
      
      TokenStorage.clear();
      router.push({ name: 'root' });

      return new Promise((resolve, reject) => {
        reject(error);
      });
    }

    // Try request again with new token
    return TokenStorage.getNewToken()
      .then((token) => {

        // New request with new token
        const config = error.config;
        config.headers['Authorization'] = `Bearer ${token}`;

        return new Promise((resolve, reject) => {
          axios.request(config).then(response => {
            resolve(response);
          }).catch((error) => {
            reject(error);
          })
        });

      })
      .catch((error) => {
      	Promise.reject(error);
      });
  });
}

The TokenStorage is a service of mine which stores the tokens and requests new tokens (just a simple API call to a backend service).

For the backend endpoints I use the LexikJWTAuthenticationBundle for the JWT authentication and the JWTRefreshTokenBundle to create a new JWT with a refresh token as soon as the JWT is expired.