Axios intercepteurs et asynchrone de connexion

Je suis la mise en œuvre de jeton d'authentification dans mon application web. Mon access token expire toutes les N minutes et qu'un refresh token est utilisé pour la connexion et d'obtenir un nouveau access token.

- Je utiliser Axios pour tous mes appels de l'API. J'ai un intercepteur mis en place pour intercepter 401 réponses.

axios.interceptors.response.use(undefined, function (err) {
  if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
    serviceRefreshLogin(
      getRefreshToken(),
      success => { setTokens(success.access_token, success.refresh_token) },
      error => { console.log('Refresh login error: ', error) }
    )
    err.config.__isRetryRequest = true
    err.config.headers.Authorization = 'Bearer ' + getAccessToken()
    return axios(err.config);
  }
  throw err
})

En gros, comme je l'interception d'une réponse 401, je veux faire un login et de réessayer l'original a rejeté la demande avec les nouveaux jetons. Mon serviceRefreshLogin appels de fonction setAccessToken() dans son then bloc. Mais le problème est que
le then bloc arrive plus tard que la getAccessToken() dans l'intercepteur, de sorte que la nouvelle tentative qui se passe avec l'ancien expiré informations d'identification.

getAccessToken() et getRefreshToken() il suffit de retourner l'existant jetons stockés dans le navigateur (ils gèrent localStorage, cookies, etc).

Comment puis-je assurer les déclarations ne pas exécuter jusqu'à ce qu'une promesse de rendements?

(Voici un numéro correspondant sur github: https://github.com/mzabriskie/axios/issues/266)

InformationsquelleAutor Dmitry Shvedov | 2016-03-09
  1. 24

    Suffit d'utiliser une autre promesse 😀

    axios.interceptors.response.use(undefined, function (err) {
    return new Promise(function (resolve, reject) {
        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
            serviceRefreshLogin(
                getRefreshToken(),
                success => { 
                        setTokens(success.access_token, success.refresh_token) 
                        err.config.__isRetryRequest = true
                        err.config.headers.Authorization = 'Bearer ' + getAccessToken();
                        axios(err.config).then(resolve, reject);
                },
                error => { 
                    console.log('Refresh login error: ', error);
                    reject(error); 
                }
            );
        }
        throw err;
    });
});

    Si votre environnement ne prend pas de suport promesses utilisation polyfill, par exemple https://github.com/stefanpenner/es6-promise

    Mais, il peut être préférable de réécrire getRefreshToken de retour promesse et ensuite de rendre le code plus simple

    axios.interceptors.response.use(undefined, function (err) {

        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
            return getRefreshToken()
            .then(function (success) {
                setTokens(success.access_token, success.refresh_token) ;                   
                err.config.__isRetryRequest = true;
                err.config.headers.Authorization = 'Bearer ' + getAccessToken();
                return axios(err.config);
            })
            .catch(function (error) {
                console.log('Refresh login error: ', error);
                throw error;
            });
        }
        throw err;
});

    Démo https://plnkr.co/edit/0ZLpc8jgKI18w4c0f905?p=preview

    • Malheureusement, cela ne fonctionne pas comme un intercepteur. Quand j'essaye de cela, la demande sera retentée seulement APRÈS la promesse d'origine est rejeté.
    • j'ai fait plunkr plnkr.co/modifier/0ZLpc8jgKI18w4c0f905?p=preview
    • Désolé, ajouté une clarification - je ne vois pas beaucoup de sens dans la prise de getRefreshToken() dans une promesse. C'est une fonction qui gère les trucs locaux pour le navigateur, il y a toujours quelque chose qui y sont disponibles. Actualiser jeton n'expire jamais BTW.
    • juste une petite remarque, pour moi, err.le statut n'est pas défini, utilisé err.réponse.le statut de la place
    InformationsquelleAutor ForceUser
  2. 7

    Pourrait le faire à la demande au lieu de la réponse, et il serait probablement plus propre car il faudrait éviter de heurter le serveur lorsque le jeton d'accès est expiré. La copie de cet article:

    JS:

    function issueToken() {
  return new Promise((resolve, reject) => {
    return client({
      ...
    }).then((response) => {
      resolve(response);
    }).catch((err) => {
      reject(err);
    });
  });
}

client.interceptors.request.use((config) => {
  let originalRequest = config;
  if (tokenIsExpired && path_is_not_login) {
    return issueToken().then((token) => {
      originalRequest['Authorization'] = 'Bearer ' + token;
      return Promise.resolve(originalRequest);
    });
  }
  return config;
}, (err) => {
  return Promise.reject(err);
});

    InformationsquelleAutor Daniel