React Native’de API 401 Hatalarını Düzgün Bir Şekilde Ele Alma: Axios Interceptors ile Otomatik Token Yenileme
React Native uygulamalarınızda API çağrıları yaparken, yetkisiz erişim (401 hata kodu) gibi durumlarla karşılaşabilirsiniz. Bu gibi durumlarda, tokenınızın yenilenmesi gerekebilir ve bu da uygulamanızın kesintisiz çalışmasını sağlayacaktır. Bu makalede, React Native uygulamalarınızda API 401 hatalarını nasıl sorunsuz bir şekilde ele alacağınızı ve Axios interceptors ile otomatik token yenileme özelliğini nasıl uygulayacağınızı ayrıntılı bir şekilde ele alacağız.
API 401 Hataları ve Token Yenileme
Bir API’ye yetkisiz erişim olduğunda, sunucu genellikle 401 Unauthorized hata kodunu döndürür. Bu, kullanıcının oturum açmamış olabileceği veya oturum açma tokenının süresinin dolmuş olabileceği anlamına gelir. Bu gibi durumlarda, tokenı yenilemek için bir işlem başlatılması gerekir. Token yenileme işlemi, API’den yeni bir token istemek ve bunu uygulamada güncellemek için yapılır.
Axios Interceptors Kullanarak Otomatik Token Yenileme
Axios, React Native uygulamalarında API çağrıları yapmak için kullanılan popüler bir JavaScript kütüphanesidir. Axios interceptors, istek ve yanıtları yakalamak ve bunlara isteğe bağlı işlem uygulamak için güçlü bir mekanizma sağlar. Bu, token yenileme işlemini otomatikleştirmek için mükemmel bir yol sağlar.
İşte Axios interceptors kullanarak token yenileme işlemini nasıl uygulayacağınız:
1. **Axios’u Projenize Kurun:**
“`bash
npm install axios
“`
2. **Token Yenileme İşlevini Tanımlayın:**
“`javascript
async function refreshToken() {
try {
const response = await axios.post(‘/api/refresh-token’, {
refreshToken: localStorage.getItem(‘refreshToken’)
});
localStorage.setItem(‘accessToken’, response.data.accessToken);
return response.data.accessToken;
} catch (error) {
// Hata yönetimi
console.error(‘Token yenileme hatası:’, error);
// Gerekirse kullanıcının oturumunu kapatın
logout();
}
}
“`
3. **Axios Interceptors’ı Ayarlayın:**
“`javascript
axios.interceptors.response.use(
(response) => response,
async (error) => {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const accessToken = await refreshToken();
originalRequest.headers.Authorization = `Bearer ${accessToken}`;
return axios(originalRequest);
}
return Promise.reject(error);
}
);
“`
4. **Oturum Açma ve Oturum Kapatma İşlemlerini Güncelleyin:**
Oturum açma ve oturum kapatma işlemleri, tokenları doğru şekilde kaydetmek ve silmek için ayarlanmalıdır.
“`javascript
// Oturum açma
const login = async (credentials) => {
try {
const response = await axios.post(‘/api/login’, credentials);
localStorage.setItem(‘accessToken’, response.data.accessToken);
localStorage.setItem(‘refreshToken’, response.data.refreshToken);
// Giriş işlemi başarılı, kullanıcının yönlendirilmesi gerekebilir
} catch (error) {
// Hata yönetimi
}
};
// Oturum kapatma
const logout = () => {
localStorage.removeItem(‘accessToken’);
localStorage.removeItem(‘refreshToken’);
// Kullanıcının yönlendirilmesi gerekebilir
};
“`
Ek Öneriler
* **Hata Yönetimi:** Token yenileme başarısız olursa, kullanıcıyı oturum açma sayfasına yönlendirmek veya uygun bir hata mesajı görüntülemek için doğru hata yönetimi uygulamak önemlidir.
* **Güvenlik:** Tokenların güvenli bir şekilde depolanması önemlidir. Yerel depolama, tokenları saklamak için güvenli bir seçenek değildir. Tokenları güvenli bir şekilde saklamak için bir uygulama içi token deposu veya güvenlikli bir üçüncü taraf hizmet kullanın.
* **Token Süresi:** Token süresini ayarlayarak, tokenın ne kadar süre geçerli olacağını belirtebilirsiniz. Bu, güvenliği artırmaya yardımcı olabilir.
* **Oturum Zaman Aşımı:** Kullanıcı belirli bir süre boyunca aktif değilse, otomatik olarak oturum açma işlemi yapılabilir. Bu, tokenın süresinin dolmasını ve yetkisiz erişimi önlemeye yardımcı olabilir.
Sonuç
Bu makalede, React Native uygulamalarınızda API 401 hatalarını nasıl sorunsuz bir şekilde ele alacağınızı ve Axios interceptors ile otomatik token yenileme özelliğini nasıl uygulayacağınızı öğrendiniz. Bu yaklaşım, uygulamanızın kullanıcı deneyimini iyileştirerek kesintisiz çalışmasını sağlayacaktır.
Umarım bu makale size yardımcı olmuştur. Daha fazla bilgi için lütfen [fatihsoysal.com](https://fatihsoysal.com) adresini ziyaret edin.
#Etiketler: React Native, API, 401 Hata, Token Yenileme, Axios, Interceptors, JavaScript, Mobil Geliştirme, Güvenlik, Uygulama Geliştirme, Web Geliştirme