React Native’de API 401 Hatalar\u0131n\u0131 D\u00fczg\u00fcn Bir \u015eekilde Ele Alma: Axios Interceptors ile Otomatik Token Yenileme<\/p>\n
React Native uygulamalar\u0131n\u0131zda API \u00e7a\u011fr\u0131lar\u0131 yaparken, yetkisiz eri\u015fim (401 hata kodu) gibi durumlarla kar\u015f\u0131la\u015fabilirsiniz. Bu gibi durumlarda, token\u0131n\u0131z\u0131n yenilenmesi gerekebilir ve bu da uygulaman\u0131z\u0131n kesintisiz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacakt\u0131r. Bu makalede, React Native uygulamalar\u0131n\u0131zda API 401 hatalar\u0131n\u0131 nas\u0131l sorunsuz bir \u015fekilde ele alaca\u011f\u0131n\u0131z\u0131 ve Axios interceptors ile otomatik token yenileme \u00f6zelli\u011fini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alaca\u011f\u0131z. <\/p>\n
Bir API’ye yetkisiz eri\u015fim oldu\u011funda, sunucu genellikle 401 Unauthorized hata kodunu d\u00f6nd\u00fcr\u00fcr. Bu, kullan\u0131c\u0131n\u0131n oturum a\u00e7mam\u0131\u015f olabilece\u011fi veya oturum a\u00e7ma token\u0131n\u0131n s\u00fcresinin dolmu\u015f olabilece\u011fi anlam\u0131na gelir. Bu gibi durumlarda, token\u0131 yenilemek i\u00e7in bir i\u015flem ba\u015flat\u0131lmas\u0131 gerekir. Token yenileme i\u015flemi, API’den yeni bir token istemek ve bunu uygulamada g\u00fcncellemek i\u00e7in yap\u0131l\u0131r. <\/p>\n
Axios, React Native uygulamalar\u0131nda API \u00e7a\u011fr\u0131lar\u0131 yapmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Axios interceptors, istek ve yan\u0131tlar\u0131 yakalamak ve bunlara iste\u011fe ba\u011fl\u0131 i\u015flem uygulamak i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sa\u011flar. Bu, token yenileme i\u015flemini otomatikle\u015ftirmek i\u00e7in m\u00fckemmel bir yol sa\u011flar. <\/p>\n
\u0130\u015fte Axios interceptors kullanarak token yenileme i\u015flemini nas\u0131l uygulayaca\u011f\u0131n\u0131z: <\/p>\n
1. **Axios’u Projenize Kurun:**<\/p>\n
“`bash
\nnpm install axios
\n“`<\/p>\n
2. **Token Yenileme \u0130\u015flevini Tan\u0131mlay\u0131n:**<\/p>\n
“`javascript
\nasync function refreshToken() {
\n try {
\n const response = await axios.post(‘\/api\/refresh-token’, {
\n refreshToken: localStorage.getItem(‘refreshToken’)
\n });
\n localStorage.setItem(‘accessToken’, response.data.accessToken);
\n return response.data.accessToken;
\n } catch (error) {
\n \/\/ Hata y\u00f6netimi
\n console.error(‘Token yenileme hatas\u0131:’, error);
\n \/\/ Gerekirse kullan\u0131c\u0131n\u0131n oturumunu kapat\u0131n
\n logout();
\n }
\n}
\n“`<\/p>\n
3. **Axios Interceptors’\u0131 Ayarlay\u0131n:**<\/p>\n
“`javascript
\naxios.interceptors.response.use(
\n (response) => response,
\n async (error) => {
\n const originalRequest = error.config;
\n if (error.response.status === 401 && !originalRequest._retry) {
\n originalRequest._retry = true;
\n const accessToken = await refreshToken();
\n originalRequest.headers.Authorization = `Bearer ${accessToken}`;
\n return axios(originalRequest);
\n }
\n return Promise.reject(error);
\n }
\n);
\n“`<\/p>\n
4. **Oturum A\u00e7ma ve Oturum Kapatma \u0130\u015flemlerini G\u00fcncelleyin:**<\/p>\n
Oturum a\u00e7ma ve oturum kapatma i\u015flemleri, tokenlar\u0131 do\u011fru \u015fekilde kaydetmek ve silmek i\u00e7in ayarlanmal\u0131d\u0131r. <\/p>\n
“`javascript
\n\/\/ Oturum a\u00e7ma
\nconst login = async (credentials) => {
\n try {
\n const response = await axios.post(‘\/api\/login’, credentials);
\n localStorage.setItem(‘accessToken’, response.data.accessToken);
\n localStorage.setItem(‘refreshToken’, response.data.refreshToken);
\n \/\/ Giri\u015f i\u015flemi ba\u015far\u0131l\u0131, kullan\u0131c\u0131n\u0131n y\u00f6nlendirilmesi gerekebilir
\n } catch (error) {
\n \/\/ Hata y\u00f6netimi
\n }
\n};<\/p>\n
\/\/ Oturum kapatma
\nconst logout = () => {
\n localStorage.removeItem(‘accessToken’);
\n localStorage.removeItem(‘refreshToken’);
\n \/\/ Kullan\u0131c\u0131n\u0131n y\u00f6nlendirilmesi gerekebilir
\n};
\n“`<\/p>\n
* **Hata Y\u00f6netimi:** Token yenileme ba\u015far\u0131s\u0131z olursa, kullan\u0131c\u0131y\u0131 oturum a\u00e7ma sayfas\u0131na y\u00f6nlendirmek veya uygun bir hata mesaj\u0131 g\u00f6r\u00fcnt\u00fclemek i\u00e7in do\u011fru hata y\u00f6netimi uygulamak \u00f6nemlidir.
\n* **G\u00fcvenlik:** Tokenlar\u0131n g\u00fcvenli bir \u015fekilde depolanmas\u0131 \u00f6nemlidir. Yerel depolama, tokenlar\u0131 saklamak i\u00e7in g\u00fcvenli bir se\u00e7enek de\u011fildir. Tokenlar\u0131 g\u00fcvenli bir \u015fekilde saklamak i\u00e7in bir uygulama i\u00e7i token deposu veya g\u00fcvenlikli bir \u00fc\u00e7\u00fcnc\u00fc taraf hizmet kullan\u0131n.
\n* **Token S\u00fcresi:** Token s\u00fcresini ayarlayarak, token\u0131n ne kadar s\u00fcre ge\u00e7erli olaca\u011f\u0131n\u0131 belirtebilirsiniz. Bu, g\u00fcvenli\u011fi art\u0131rmaya yard\u0131mc\u0131 olabilir.
\n* **Oturum Zaman A\u015f\u0131m\u0131:** Kullan\u0131c\u0131 belirli bir s\u00fcre boyunca aktif de\u011filse, otomatik olarak oturum a\u00e7ma i\u015flemi yap\u0131labilir. Bu, token\u0131n s\u00fcresinin dolmas\u0131n\u0131 ve yetkisiz eri\u015fimi \u00f6nlemeye yard\u0131mc\u0131 olabilir.<\/p>\n
Bu makalede, React Native uygulamalar\u0131n\u0131zda API 401 hatalar\u0131n\u0131 nas\u0131l sorunsuz bir \u015fekilde ele alaca\u011f\u0131n\u0131z\u0131 ve Axios interceptors ile otomatik token yenileme \u00f6zelli\u011fini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 \u00f6\u011frendiniz. Bu yakla\u015f\u0131m, uygulaman\u0131z\u0131n kullan\u0131c\u0131 deneyimini iyile\u015ftirerek kesintisiz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacakt\u0131r. <\/p>\n
Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur. Daha fazla bilgi i\u00e7in l\u00fctfen [fatihsoysal.com](https:\/\/fatihsoysal.com) adresini ziyaret edin. <\/p>\n
#Etiketler: React Native, API, 401 Hata, Token Yenileme, Axios, Interceptors, JavaScript, Mobil Geli\u015ftirme, G\u00fcvenlik, Uygulama Geli\u015ftirme, Web Geli\u015ftirme<\/p>\n","protected":false},"excerpt":{"rendered":"React Native’de API 401 Hatalar\u0131n\u0131 D\u00fczg\u00fcn Bir \u015eekilde Ele Alma: Axios Interceptors ile Otomatik Token Yenileme React Native…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3535","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n