Axios Interceptor ile REST API Hata Yönetimi ve Otomatik Token Yenileme (Refresh Token)

Salı saat 17:01 OP

Konuyu Açan #0

Axios, JavaScript tabanlı uygulamalarda HTTP istekleri yapmak için yaygın olarak kullanılan bir kütüphanedir. Özellikle REST API'lerle etkileşimde bulunurken, hata yönetimi ve otomatik token yenileme gibi işlemleri gerçekleştirmek için Axios interceptor'ları kullanmak oldukça etkilidir. Bu yazıda, Axios interceptor'larının nasıl çalıştığını ve bu mekanizmaların hata yönetimi ve token yenileme süreçlerini nasıl kolaylaştırdığını inceleyeceğiz.

Interceptor'lar Nedir?

Interceptor'lar, Axios istekleri ve yanıtları üzerinde işlem yapmamızı sağlayan fonksiyonlardır. İki tür interceptor bulunmaktadır: istek interceptor'ları ve yanıt interceptor'ları. İstek interceptor'ları, bir HTTP isteği gönderilmeden önce çalışır, yanıt interceptor'ları ise sunucudan gelen yanıtlar üzerinde işlem yapar.

Hata Yönetimi

Hata yönetimi için yanıt interceptor'ı kullanarak, sunucudan dönen hataları merkezi bir şekilde yönetebiliriz. Örneğin, 401 hatası (yetkisiz erişim) alındığında, kullanıcıyı oturum açma sayfasına yönlendirmek veya bir uyarı mesajı göstermek gibi işlemleri kolaylıkla gerçekleştirebiliriz. Aşağıdaki örnek, bu işlemi nasıl gerçekleştirebileceğimizi gösterir:

CODE

123456789101112
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // Yetkisiz erişim durumunda yapılacak işlemler
      alert('Oturumunuz sona erdi, lütfen tekrar giriş yapın.');
      // Yönlendirme veya başka işlemler
    }
    return Promise.reject(error);
  }
);

Otomatik Token Yenileme

Token yenileme işlemi, kullanıcıların sürekli olarak oturum açmalarını sağlamadan, arka planda token'larını güncellemeye olanak tanır. Genellikle, refresh token kullanarak, access token süresi dolduğunda yeni bir access token almak için bir interceptor tanımlanabilir. Aşağıda, refresh token mekanizmasının nasıl çalıştığını gösteren bir örnek bulunmaktadır:

CODE

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
let isRefreshing = false;
let pendingRequests = [];

const processQueue = (error, token = null) => {
  pendingRequests.forEach(prom => {
    if (error) {
      prom.reject(error);
    } else {
      prom.resolve(token);
    }
  });

  pendingRequests = [];
};

axios.interceptors.response.use(
  response => response,
  async (error) => {
    const originalRequest = error.config;

    if (error.response.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        return new Promise((resolve, reject) => {
          pendingRequests.push({ resolve, reject });
        }).then(token => {
          originalRequest.headers['Authorization'] = 'Bearer ' + token;
          return axios(originalRequest);
        }).catch(err => {
          return Promise.reject(err);
        });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      const { data } = await axios.post('/auth/refresh-token', {
        // Refresh token bilgileri
      });

      axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.accessToken;
      originalRequest.headers['Authorization'] = 'Bearer ' + data.accessToken;

      processQueue(null, data.accessToken);
      return axios(originalRequest);
    }

    return Promise.reject(error);
  }
);

Bu yöntemlerle, hem hata yönetimini etkili bir şekilde gerçekleştirebilir hem de kullanıcı deneyimini iyileştirerek token yenileme süreçlerini otomatikleştirebilirsiniz. Axios interceptor'larının bu güçlü özellikleri, REST API uygulamalarında kritik bir rol oynamaktadır.

Benzer konular

İçeriği Şikayet Et