<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde, Angular uygulamalar\u0131nda kullan\u0131c\u0131lar taraf\u0131ndan yap\u0131lan requestler ile sunucu aras\u0131na farkl\u0131 i\u015flemleri s\u0131k\u0131\u015ft\u0131rmam\u0131z\u0131 ve requestin sunucuya yeni modifike edilmi\u015f haliyle eri\u015fmesini sa\u011flayan HTTP Client Interceptor yap\u0131s\u0131n\u0131 inceliyor olaca\u011f\u0131z.<\/p>\n

Yukar\u0131daki \u015femay\u0131 incelerseniz e\u011fer clienttan gelen request, interceptor arac\u0131l\u0131\u011f\u0131 ile modifike edilmekte ve yeni haliyle sunucuya g\u00f6nderilmektedir. Bu yap\u0131, bizlere requestler \u00fczerinde \u00f6ncelikli m\u00fcdahale \u015fans\u0131 tan\u0131makta ve yap\u0131sal olarak bir\u00e7ok noktada pratik manevralar uygulamam\u0131z\u0131 sa\u011flamaktad\u0131r.<\/p>\n

Bu i\u00e7eri\u011fimizde Interceptor yap\u0131s\u0131na \u00f6rnek olarak Token Authentication kullan\u0131lan Web Api’den elde edilen token\u0131, gelecek olan t\u00fcm requestlere interceptor ile m\u00fcdahalede bulunup headers \u00f6zelli\u011fine ekleyece\u011fimiz bir senaryo \u00fczerinden seyredece\u011fiz.<\/p>\n

\u0130lk olarak interceptor yap\u0131s\u0131n\u0131n kullanmad\u0131\u011f\u0131 durumu inceleyelim.<\/p>\n

\r\nimport { Injectable } from '@angular\/core';\r\nimport { HttpClient, HttpHeaders } from '@angular\/common\/http';\r\nimport { Personel } from '..\/..\/models\/Personel';\r\nimport { PostToken } from '..\/..\/models\/PostToken';\r\n@Injectable()\r\nexport class WebApiService {\r\n  constructor(private httpClient: HttpClient) { }\r\n  getList<T>(header: HttpHeaders) {\r\n    return this.httpClient.get<T>("http:\/\/localhost:51361\/api\/personel\/getlist", { headers: header });\r\n  }\r\n  getSingle(id: number, header: HttpHeaders) {\r\n    return this.httpClient.get(`http:\/\/localhost:51361\/api\/personel\/getsingle\/${id}`, { headers: header });\r\n  }\r\n  post(personel: Personel, header: HttpHeaders) {\r\n    return this.httpClient.post("http:\/\/localhost:51361\/api\/personel\/post", personel, { headers: header });\r\n  }\r\n  put(personel: Personel, header: HttpHeaders) {\r\n    return this.httpClient.put("http:\/\/localhost:51361\/api\/personel\/getlist", personel, { headers: header });\r\n  }\r\n  remove(id: number, header: HttpHeaders) {\r\n    return this.httpClient.delete(`http:\/\/localhost:51361\/api\/personel\/delete\/${id}`, { headers: header });\r\n  }\r\n  getToken(data: string, header: HttpHeaders) {\r\n    return this.httpClient.post("http:\/\/localhost:51361\/token", data, { headers: header });\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki “WebApiService” isimli servisimiz g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere web apiye gerekli http metotlar\u0131n\u0131 uygulamakla g\u00f6revlendirilmi\u015ftir. Lakin dikkat ederseniz her bir metot parametre olarak HttpHeaders tipinde nesne almakta ve http metoduna g\u00f6ndermektedir.<\/p>\n
Hatta bu servisi kullanan birka\u00e7 \u00f6rnek component inceleyelim;<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Personel } from '..\/..\/..\/..\/models\/Personel';\r\nimport { HttpHeaders } from '@angular\/common\/http';\r\nimport { WebApiService } from '..\/..\/..\/services\/web-api.service';\r\n@Component({\r\n  selector: 'app-addpersonel',\r\n  templateUrl: '.\/addpersonel.component.html',\r\n  styleUrls: ['.\/addpersonel.component.css']\r\n})\r\nexport class AddpersonelComponent implements OnInit {\r\n  constructor(private webApiService: WebApiService) { }\r\n  ngOnInit() {  }\r\n  AddPersonel(txtAd: HTMLInputElement, txtSoyAd: HTMLInputElement, txtUnvan: HTMLInputElement) {\r\n    let personel: Personel = {\r\n      Adi: txtAd.value,\r\n      SoyAdi: txtSoyAd.value,\r\n      Unvan: txtUnvan.value\r\n    };\r\n    const token = localStorage.getItem("token");\r\n    const headers: HttpHeaders = new HttpHeaders({ "Authorization": `Bearer ${token}` });\r\n    this.webApiService.post(personel, headers).subscribe(data => alert(data));\r\n  }\r\n}\r\n<\/pre>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Personel } from '..\/..\/..\/..\/models\/Personel';\r\nimport { HttpHeaders } from '@angular\/common\/http';\r\nimport { WebApiService } from '..\/..\/..\/services\/web-api.service';\r\n@Component({\r\n  selector: 'app-personel-list',\r\n  templateUrl: '.\/personel-list.component.html',\r\n  styleUrls: ['.\/personel-list.component.css']\r\n})\r\nexport class PersonelListComponent implements OnInit {\r\n  constructor(private webApiService: WebApiService) { }\r\n  personelList: Personel[] = [];\r\n  ngOnInit() {  }\r\n  getList() {\r\n    const token = localStorage.getItem("token");\r\n    const headers: HttpHeaders = new HttpHeaders({ "Authorization": `Bearer ${token}` });\r\n    this.webApiService.getList(headers).subscribe((data: Personel[]) => this.personelList = data);\r\n  }\r\n}\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Web Api’ye yap\u0131lan her bir request i\u00e7in birer headers olu\u015fturulmakta ve bu i\u015flem \u00e7al\u0131\u015f\u0131lan t\u00fcm fonksiyonlar i\u00e7erisinde tekrar tekrar uygulanmaktad\u0131r.<\/p>\n
\u0130\u015fte bu ve buna benzer durumlarda HTTP Client Interceptor yap\u0131s\u0131 requestlere tek elden m\u00fcdahale etmemizi sa\u011flamakta ve her metotta ger\u00e7ekle\u015ftirilen i\u015flemi tek seferde halletmemize olanak tan\u0131maktad\u0131r.<\/p>\n
HTTP Client Interceptor yap\u0131s\u0131n\u0131 olu\u015fturabilmek i\u00e7in \u00f6ncelikle bir class olu\u015fturulmal\u0131 ve i\u00e7erisine “@angular\/common\/http” dizininden “HttpInterceptor”, “HttpRequest” ve “HttpHandler” mod\u00fclleri import edilmelidir.<\/p>\n
Mod\u00fclleri i\u015flevsel olarak tan\u0131tmam\u0131z gerekirse e\u011fer;<\/p>\n
\n\nHttpInterceptor<\/strong>
\nHerhangi bir s\u0131n\u0131f “HttpInterceptor” interfaceinden t\u00fcretilirse “intercept” metodunu uygulatacakt\u0131r ve ilgili s\u0131n\u0131f interceptor \u00f6zelli\u011fi g\u00f6sterecektir.\n<\/li>\n
\nHttpRequest<\/strong>
\nGelen requestleri yakalamam\u0131z\u0131 sa\u011flayan mod\u00fcld\u00fcr.\n<\/li>\n
\nHttpHandler<\/strong>
\nRequestin as\u0131l hedefini tutmaktad\u0131r. Interceptor yap\u0131s\u0131n\u0131n i\u015fi bitti\u011fi vakit bu mod\u00fcl sayesinde as\u0131l hedefe y\u00f6nlendirme sa\u011flanmaktad\u0131r.\n<\/li>\n<\/ul>\nBu mod\u00fcllerin d\u0131\u015f\u0131nda interceptor i\u00e7erisinde asenkron i\u015flemler bitti\u011finde yap\u0131lacak i\u015flemleri y\u00f6netebilmek i\u00e7in kullan\u0131lan “do” fonksiyonuna eri\u015febilmek i\u00e7in “rxjs\/add\/operator\/do” dizinini import etmemiz yeterlidir.<\/p>\n
\r\nimport { HttpInterceptor, HttpRequest, HttpHandler } from '@angular\/common\/http';\r\nimport "rxjs\/add\/operator\/do";\r\nexport class AuthInterceptor implements HttpInterceptor {\r\n    intercept(request: HttpRequest<any>, next: HttpHandler) {\r\n        const token = localStorage.getItem("token");\r\n        let newRequest: HttpRequest<any>;\r\n        if (request.url != "http:\/\/localhost:51361\/token") {\r\n            newRequest = request.clone({\r\n                headers: request.headers.set("Authorization", `Bearer ${token}`)\r\n            });\r\n        } else\r\n            newRequest = request.clone();\r\n\r\n        return next.handle(newRequest)\r\n            .do(\r\n                success => console.log(success),\r\n                error => console.log(error.message)\r\n            );\r\n    }\r\n}\r\n<\/pre>\nEvet… Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer bir interceptor yap\u0131s\u0131 olu\u015fturmu\u015f bulunmaktay\u0131z. “HttpInterceptor” mod\u00fcl\u00fc bir interface oldu\u011fundan dolay\u0131 “AuthInterceptor” ismini verdi\u011fimiz interceptor’a “intercept” metodunu uygulatmaktad\u0131r. Bu metot yap\u0131sal olarak “HttpRequest” ve “HttpHandler” parametrelerini almakta ve i\u00e7erisinde elde edilip localStorage’e at\u0131lm\u0131\u015f token’\u0131 headers olarak requeste set etmektedir.<\/p>\n
\u015eimdi bu olu\u015fturdu\u011fumuz interceptor’\u0131 projemizin ana mod\u00fcl\u00fcnde providers olarak a\u015fa\u011f\u0131daki gibi belirtmemiz gerekmektedir.<\/p>\n
\r\n.\r\n.\r\n.\r\n  providers: [WebApiService, AuthService, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }]\r\n.\r\n.\r\n.\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere providers \u00f6zelli\u011fine ilgili interceptor\u0131 belirtmi\u015f olduk. Bu i\u015flemden sonra art\u0131k yap\u0131lacak t\u00fcm requestlerde interceptor devreye girecek ve gerekli modifikasyonu sa\u011flayacakt\u0131r.<\/p>\n
Art\u0131k, ne http metotlar\u0131n\u0131 uygulamakla g\u00f6revli servisimizdeki metotlarda header tan\u0131mlamak zorunday\u0131z, ne de tetikleme yap\u0131lan t\u00fcm metotlarda… Tek elden interceptor bizim i\u00e7in gerekli header tan\u0131mlamas\u0131n\u0131 sa\u011flamakta ve kullan\u0131c\u0131lardan gelen requestlere token’\u0131 sunmaktad\u0131r.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde, Angular uygulamalar\u0131nda kullan\u0131c\u0131lar taraf\u0131ndan yap\u0131lan requestler ile sunucu aras\u0131na farkl\u0131 i\u015flemleri s\u0131k\u0131\u015ft\u0131rmam\u0131z\u0131 ve requestin sunucuya yeni modifike edilmi\u015f haliyle eri\u015fmesini sa\u011flayan HTTP Client Interceptor yap\u0131s\u0131n\u0131 inceliyor olaca\u011f\u0131z. Yukar\u0131daki \u015femay\u0131 incelerseniz e\u011fer...<\/p>\n","protected":false},"author":1,"featured_media":9034,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2415],"tags":[2554,2555,2553,1530,2551,2552],"class_list":["post-9029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-5","tag-angular-5","tag-angular-5-interceptor","tag-http-client-interceptor","tag-httphandler","tag-httpinterceptor","tag-httprequest"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=9029"}],"version-history":[{"count":18,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9029\/revisions"}],"predecessor-version":[{"id":9048,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9029\/revisions\/9048"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/9034"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=9029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=9029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=9029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}