{"id":14802,"date":"2025-03-10T22:15:14","date_gmt":"2025-03-10T19:15:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/angular-interceptorlari-kullanim-alanlari-fonksiyonlari-ve-uygulama\/"},"modified":"2025-03-10T22:15:14","modified_gmt":"2025-03-10T19:15:14","slug":"angular-interceptorlari-kullanim-alanlari-fonksiyonlari-ve-uygulama","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-interceptorlari-kullanim-alanlari-fonksiyonlari-ve-uygulama\/","title":{"rendered":"Angular Interceptor’lar\u0131: Kullan\u0131m Alanlar\u0131, Fonksiyonlar\u0131 ve Uygulama"},"content":{"rendered":"

Angular Interceptor’lar\u0131: Kullan\u0131m Alanlar\u0131, Fonksiyonlar\u0131 ve Uygulama<\/p>\n

Merhaba, Fatih Soysal burada. Bu yaz\u0131da, Angular’da interceptor’lar\u0131n ne i\u015fe yarad\u0131\u011f\u0131n\u0131, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve nas\u0131l uygulanaca\u011f\u0131n\u0131 ayr\u0131nt\u0131l\u0131 olarak ele alaca\u011f\u0131z. Interceptor’lar, Angular uygulamalar\u0131n\u0131zda istekleri yakalamak ve de\u011fi\u015ftirmek i\u00e7in olduk\u00e7a g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. \u00d6rne\u011fin, her HTTP iste\u011fine bir yetkilendirme ba\u015fl\u0131\u011f\u0131 eklemek veya istek ve yan\u0131tlar\u0131 g\u00fcnl\u00fc\u011fe kaydetmek i\u00e7in kullanabilirsiniz.<\/p>\n

Interceptor’lar Nedir ve Ne \u0130\u015fe Yarar?<\/h2>\n

Angular’daki interceptor’lar, HTTP istekleri ve yan\u0131tlar\u0131 \u00fczerinde i\u015flem yapman\u0131za olanak tan\u0131yan ara katmanlard\u0131r. Bir interceptor, bir HTTP iste\u011fi g\u00f6nderilmeden *\u00f6nce* veya bir yan\u0131t al\u0131nd\u0131ktan *sonra* \u00e7al\u0131\u015ft\u0131r\u0131labilir. Bu sayede, iste\u011fe ek bilgiler ekleyebilir, yan\u0131tlardan veri \u00e7\u0131karabilir veya hatalar\u0131 yakalayabilirsiniz. K\u0131sacas\u0131, t\u00fcm HTTP i\u015flemlerinizi tek bir noktadan y\u00f6netmenizi sa\u011flarlar. Bu durum, kodunuzun daha d\u00fczenli, daha okunabilir ve daha bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar.<\/p>\n

\u00d6rne\u011fin, her bir iste\u011fe bir authentication token eklemek i\u00e7in bir interceptor kullanabilirsiniz. Bu sayede, her servis \u00e7a\u011fr\u0131n\u0131zda token’\u0131 manuel olarak eklemek zorunda kalmazs\u0131n\u0131z. Bunun yan\u0131 s\u0131ra, isteklerinizi g\u00fcnl\u00fc\u011fe kaydetmek, hata y\u00f6netimi uygulamak veya yan\u0131tlar\u0131 d\u00f6n\u00fc\u015ft\u00fcrmek gibi \u00e7e\u015fitli g\u00f6revler i\u00e7in de interceptor’lardan yararlanabilirsiniz. Sonu\u00e7 olarak, interceptor’lar kod tekrar\u0131n\u0131 azalt\u0131r ve uygulaman\u0131z\u0131n g\u00fcvenli\u011fini ve performans\u0131n\u0131 art\u0131r\u0131r.<\/p>\n

Bir Interceptor Nas\u0131l Olu\u015fturulur ve Uygulan\u0131r?<\/h2>\n

Bir interceptor olu\u015fturmak i\u00e7in, HttpInterceptor aray\u00fcz\u00fcn\u00fc uygulayan bir s\u0131n\u0131f olu\u015fturman\u0131z gerekir. Bu s\u0131n\u0131f, intercept metodunu i\u00e7ermelidir. Bu metot, her HTTP iste\u011fini yakalar ve size iste\u011fi de\u011fi\u015ftirme veya yan\u0131tlar\u0131 i\u015flemek i\u00e7in bir f\u0131rsat sunar. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n

\nimport { Injectable } from '@angular\/core';\nimport { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\n@Injectable()\nexport class AuthInterceptor implements HttpInterceptor {\n  intercept(req: HttpRequest, next: HttpHandler): Observable> {\n    const authToken = localStorage.getItem('authToken'); \n    if (authToken) {\n      const authReq = req.clone({\n        setHeaders: {\n          Authorization: Bearer ${authToken}\n        }\n      });\n      return next.handle(authReq);\n    } else {\n      return next.handle(req);\n    }\n  }\n}\n<\/code><\/pre>\n
Bu interceptor, local storage’dan bir authentication token al\u0131r ve bunu her iste\u011fin Authorization ba\u015fl\u0131\u011f\u0131na ekler.  E\u011fer token yoksa, iste\u011fi oldu\u011fu gibi ge\u00e7irir.  Daha sonra, bu interceptor’\u0131 Angular’\u0131n APP_INTERCEPTORS provider’\u0131na eklemeniz gerekir.<\/p>\n
\nimport { AuthInterceptor } from '.\/auth.interceptor';\n\n@NgModule({\n  \/\/ ... di\u011fer mod\u00fcller ...\n  providers: [\n    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }\n  ]\n})\nexport class AppModule { }\n<\/code><\/pre>\n
multi: true<\/code> \u00f6zelli\u011fi, birden fazla interceptor kullanabilmenizi sa\u011flar.  Bu, farkl\u0131 g\u00f6revler i\u00e7in birden fazla interceptor kullanabilece\u011finiz anlam\u0131na gelir.  \u00d6rne\u011fin, bir interceptor’\u0131 loglama i\u00e7in, di\u011ferini yetkilendirme i\u00e7in kullanabilirsiniz.<\/p>\n
Interceptor’lar\u0131n Avantajlar\u0131<\/h2>\n
Interceptor’lar\u0131n kullan\u0131lmas\u0131n\u0131n bir\u00e7ok avantaj\u0131 vard\u0131r.  Bunlardan baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n