Automatisez l'actualisation des jetons avec les intercepteurs Axios !

Le problème

Il y a quelque temps, je travaillais sur un petit projet qui interagissait avec l'API Salesforce et effectuait des opérations CRUD sur mes objets. J'utilisais React.js (sans configuration backend, juste une interface statique). Cependant, j'ai rencontré un problème en travaillant avec l'API. Le jeton d'accès que je génère à l'aide de la méthode OAuth n'est valable que 24 heures ! Cela signifie que je dois générer manuellement un nouveau jeton en effectuant un appel d'API OAuth à chaque fois que j'actualise l'application.

Je n'aime pas la façon dont mon application effectue des appels d'API inutiles à Salesforce OAuth pour actualiser le jeton, même s'il n'a pas expiré. Pour surmonter cela, je souhaite implémenter la logique suivante dans mon code :

axios.get('https://www.someapi.com/fetch-data').then((data)=> {
// doing something with the Data
},{}).catch((error)=> {
    if(error.response.statusCode === 401){
        // If Token Expired
        RefreshToken()
        window.alert("Session Expired Please Reload the Window!")
    }
})

Ma logique est essentiellement la suivante : s'il y a une réponse 401 du point de terminaison de l'API, j'effectue un appel API de jeton d'actualisation, je stocke le nouveau jeton dans le stockage local, puis j'invite l'utilisateur à recharger la page pour utiliser le jeton nouvellement généré. pour les appels API ultérieurs. Cependant, cette approche repose sur l'exécution par l'utilisateur d'une action supplémentaire, qui pourrait être automatisée pour améliorer l'expérience utilisateur et éviter les interruptions inutiles.

Utilisation des intercepteurs Axios

Voyons-le en action

axios.interceptors.response.use(
  (response) => response,
  async function (error) {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        })
          .then((token) => {
            originalRequest.headers["Authorization"] = "Bearer " + token;
            return axios(originalRequest);
          })
          .catch((err) => {
            return Promise.reject(err);
          });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      return new Promise((resolve, reject) => {
        initiateNewAccessTokenApi()
          .then((token) => {
            axios.defaults.headers.common["Authorization"] = "Bearer " + token;
            originalRequest.headers["Authorization"] = "Bearer " + token;
            processQueue(null, token);
            resolve(axios(originalRequest));
          })
          .catch((err) => {
            processQueue(err, null);
            reject(err);
          })
          .finally(() => {
            isRefreshing = false;
          });
      });
    }

    return Promise.reject(error);
  }
);

Explication du code

Ce que j'ai fait, c'est d'attacher un middleware à chaque requête effectuée par Axios, en vérifiant si une réponse revient avec un code d'état HTTP 401. Si c'est le cas, je relance le jeton d'accès en appelant l'API du jeton d'actualisation, je stocke le nouveau jeton dans le stockage local et je relance automatiquement tous les appels d'API précédents qui ont été refusés. C'est ça! Plus besoin de demander à l'utilisateur de « recharger la fenêtre ! » ?

J'espère que cela vous aidera et s'intégrera bien à votre travail !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!