Automatikkan Token Segar Semula dengan Pemindas Axios!

Masalahnya

Suatu ketika dahulu, saya sedang mengusahakan projek kecil yang berinteraksi dengan API Salesforce dan melakukan operasi CRUD pada objek saya. Saya menggunakan React.js (tanpa persediaan hujung belakang, hanya bahagian hadapan statik). Walau bagaimanapun, saya menghadapi masalah semasa bekerja dengan API. Token akses yang saya jana menggunakan kaedah OAuth hanya sah selama 24 jam! Ini bermakna saya perlu menjana token baharu secara manual dengan membuat panggilan API OAuth setiap kali saya memuat semula aplikasi.

Saya tidak suka cara aplikasi saya membuat panggilan API yang tidak perlu kepada Salesforce OAuth untuk memuatkan semula token, walaupun ia belum tamat tempoh. Untuk mengatasinya, saya ingin melaksanakan logik berikut dalam kod saya:

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

Logik saya pada asasnya begini: jika terdapat respons 401 daripada titik akhir API, saya membuat panggilan API token muat semula, menyimpan token baharu dalam storan setempat dan kemudian menggesa pengguna memuatkan semula halaman untuk menggunakan token yang baru dijana untuk panggilan API berikutnya. Walau bagaimanapun, pendekatan ini bergantung kepada pengguna untuk melakukan tindakan tambahan, yang boleh diautomasikan untuk meningkatkan pengalaman pengguna dan mengelakkan gangguan yang tidak perlu.

Menggunakan Axios Intercepters

Jom lihat aksinya

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

Penerangan Kod

Apa yang saya lakukan ialah melampirkan perisian tengah pada setiap permintaan yang Axios buat, menyemak sama ada sebarang respons datang kembali dengan kod status HTTP 401. Jika ya, saya memulakan semula token akses dengan memanggil API token muat semula, menyimpan token baharu dalam storan setempat dan secara automatik mencetuskan semula semua panggilan API sebelumnya yang telah ditolak. Itu sahaja! Tiada lagi meminta pengguna untuk ‘muat semula tetingkap!’ ?

Saya harap ini membantu dan disepadukan dengan baik dengan kerja anda!

Atas ialah kandungan terperinci Automatikkan Token Segar Semula dengan Pemindas Axios!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!