Automatisieren Sie Aktualisierungstoken mit Axios Intercepters!

Das Problem

Vor einiger Zeit arbeitete ich an einem kleinen Projekt, das mit der Salesforce-API interagierte und CRUD-Operationen an meinen Objekten durchführte. Ich habe React.js verwendet (ohne Backend-Setup, nur ein statisches Frontend). Bei der Arbeit mit der API ist jedoch ein Problem aufgetreten. Das von mir mit der OAuth-Methode generierte Zugriffstoken ist nur 24 Stunden gültig! Das bedeutet, dass ich jedes Mal, wenn ich die Anwendung aktualisiere, manuell ein neues Token generieren muss, indem ich einen OAuth-API-Aufruf durchführe.

Mir gefällt nicht, dass meine Anwendung unnötige API-Aufrufe an Salesforce OAuth durchführt, um das Token zu aktualisieren, selbst wenn es noch nicht abgelaufen ist. Um dies zu umgehen, möchte ich die folgende Logik in meinen Code implementieren:

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!")
    }
})

Meine Logik ist im Wesentlichen diese: Wenn es eine 401-Antwort vom API-Endpunkt gibt, führe ich einen API-Aufruf zum Aktualisieren des Tokens durch, speichere das neue Token im lokalen Speicher und fordere dann den Benutzer auf, die Seite neu zu laden, um das neu generierte Token zu verwenden für nachfolgende API-Aufrufe. Dieser Ansatz setzt jedoch voraus, dass der Benutzer eine zusätzliche Aktion ausführt, die automatisiert werden könnte, um das Benutzererlebnis zu verbessern und unnötige Unterbrechungen zu vermeiden.

Verwendung von Axios Intercepters

Sehen wir es uns in Aktion an

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);
  }
);

Code-Erklärung

Ich habe an jede Anfrage von Axios eine Middleware angehängt und überprüft, ob eine Antwort mit dem HTTP-Statuscode 401 zurückkommt. Wenn dies der Fall ist, initiiere ich das Zugriffstoken erneut, indem ich die Aktualisierungstoken-API aufrufe, speichere das neue Token im lokalen Speicher und löse automatisch alle vorherigen API-Aufrufe erneut aus, die abgelehnt wurden. Das ist es! Keine Aufforderung mehr an den Benutzer, das Fenster neu zu laden! ?

Ich hoffe, das hilft und lässt sich gut in Ihre Arbeit integrieren!

Das obige ist der detaillierte Inhalt vonAutomatisieren Sie Aktualisierungstoken mit Axios Intercepters!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!