<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Angular 4 uygulamalar\u0131nda kullan\u0131c\u0131 y\u00f6nlendirmelerinde detayl\u0131 kontrol ve optimizasyon sa\u011flamam\u0131za imkan tan\u0131yan Route Guards<\/strong> yap\u0131s\u0131n\u0131 inceleyece\u011fiz.<\/p>\n

Route Guards Nedir?<\/h4>\n
Route Guards, yukar\u0131da da bahsetti\u011fimiz gibi kullan\u0131c\u0131 y\u00f6nlendirmelerinde detayl\u0131 kontrol mekanizmas\u0131 sa\u011flamaktad\u0131rlar. Bu yap\u0131lara en g\u00fczel \u00f6rne\u011fi oturum a\u00e7ma durumlar\u0131 \u00fczerinden verebiliriz. E\u011fer ki bir kullan\u0131c\u0131 oturum a\u00e7madan sipari\u015f vermeye yahut oturum gerektiren herhangi bir i\u015flem yapmaya yelteniyorsa burada Route Guards devreye girecek, oturum giri\u015fini sa\u011flayabilmek i\u00e7in gerekli login sayfas\u0131na y\u00f6nlendirecek ve oturum a\u00e7\u0131ld\u0131ktan sonra gelinen sayfaya tekrar y\u00f6nlendirerek kal\u0131nan noktadan devam edilmesini sa\u011flayacakt\u0131r.<\/p>\n
Buradan; Route Guards, kontrol edilen sayfan\u0131n o anki aktiflik durumunu de\u011ferlendiriyor diyebiliriz. Bu de\u011ferlendirme s\u00fcrecinde sayfa aktif de\u011filse aktifle\u015ftirme i\u015flemi i\u00e7in bir ba\u015fka sayfaya y\u00f6nlendirmektedir. Tabi bu i\u015flem akabinde gelinen sayfaya tekrar y\u00f6nlendirme sa\u011flanaca\u011f\u0131 i\u00e7in hangi sayfadan gelindi\u011fi bilgisinide bizlere sunacakt\u0131r.<\/p>\n
Dolay\u0131s\u0131yla bu i\u015flemleri yapabilmek i\u00e7in “CanActivate”, “ActivatedRouteSnapshot” ve “RouterStateSnapshot” olmak \u00fczere \u00fc\u00e7 farkl\u0131 mod\u00fclden yararlanaca\u011f\u0131z.<\/p>\n
\n
CanActivate<\/strong>
\nE\u011fer bir s\u0131n\u0131f\u0131n Guard olmas\u0131 isteniyorsa ilgili s\u0131n\u0131f CanActivate interface’inden implement ediliyor olmas\u0131 gerekmektedir.\n<\/li>\n
ActivatedRouteSnapshot<\/strong>
\nKullan\u0131c\u0131n\u0131n gitmek istedi\u011fi route’u tutmaktad\u0131r.\n<\/li>\n
RouterStateSnapshot<\/strong>
\nKullan\u0131c\u0131n\u0131n geldi\u011fi route’u tutmaktad\u0131r.\n<\/li>\n<\/ul>\n
\u015eimdi Route Guards ile ilgili bir \u00f6rnek \u00fczerinden gidelim.<\/p>\n
Yukar\u0131daki sat\u0131rlarda oturum a\u00e7ma \u00fczerinden teorik \u00f6rneklendirmede bulundu\u011fumuz i\u00e7in benzer konu \u00fczerinden bir senaryo ile konumuzu pratik olarak \u00f6rneklendirelim.<\/p>\n
\u0130lk olarak login i\u015flemleri i\u00e7in Guard g\u00f6revi g\u00f6recek “LoginGuard” isimli s\u0131n\u0131f\u0131m\u0131z\u0131 in\u015fa edelim.<\/p>\n
\r\nimport { Injectable } from "@angular\/core";\r\nimport { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular\/router";\r\nimport { LocalStorageService } from 'angular-2-local-storage';\r\n\r\n@Injectable()\r\nexport class LoginGuard implements CanActivate {\r\n constructor(private localStorageService: LocalStorageService, private router: Router) {\r\n }\r\n\r\n canActivate(gidilecekSayfa: ActivatedRouteSnapshot, gelinenSayfa: RouterStateSnapshot): boolean {\r\n if (this.localStorageService.get("userName") == "gncy" && this.localStorageService.get("password") == "1234")\r\n return true;\r\n \r\n this.router.navigate(["login"]);\r\n return false;\r\n }\r\n}\r\n\r\n<\/pre>\n
Dikkat ederseniz bu s\u0131n\u0131f “Injectable” interface’inden declare edilerek bir servis \u015feklinde tasarlanm\u0131\u015ft\u0131r ve “CanActivate” interface’inden dolay\u0131 geri boolean tipinde de\u011fer d\u00f6nen “canActivate” fonksiyonu implement edilmi\u015ftir. Bu fonksiyon “true” de\u011feri d\u00f6nerse i\u015flem yap\u0131lan sayfada oturum a\u00e7\u0131k manas\u0131na gelecektir. Yok e\u011fer “false” de\u011feri d\u00f6nerse \u00f6ncelikle oturum a\u00e7\u0131lma sayfas\u0131na y\u00f6nlendirilecek, oturum a\u00e7\u0131ld\u0131ktan sonra ard\u0131ndan i\u015flem yap\u0131lacak sayfaya tekrar y\u00f6nlendirme ger\u00e7ekle\u015ftirilecektir.<\/p>\n
Burada oturum i\u015flemleri i\u00e7in Angular 4 \u2013 Local Storage Kullan\u0131m\u0131<\/a> ba\u015fl\u0131kl\u0131 makalede de\u011findi\u011fim yerel depo birimini kulland\u0131\u011f\u0131m\u0131 hat\u0131rlatmak isterim.<\/p>\n
Ard\u0131ndan oturum i\u015flemi i\u00e7in kullanaca\u011f\u0131m\u0131z “LoginComponent” sayfas\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { LocalStorageService } from 'angular-2-local-storage';\r\n\r\n@Component({\r\n selector: 'app-login',\r\n templateUrl: '.\/login.component.html',\r\n styleUrls: ['.\/login.component.css']\r\n})\r\nexport class LoginComponent implements OnInit {\r\n constructor(private localStorageService: LocalStorageService) { }\r\n Login(userName, password) {\r\n this.localStorageService.set("userName", userName);\r\n this.localStorageService.set("password", password);\r\n }\r\n ngOnInit() {\r\n }\r\n}\r\n<\/pre>\n
Bu sayfan\u0131n g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc olu\u015ftural\u0131m.<\/p>\n
\r\nUser Name\r\n<br>\r\n<input type="text" #txtUserName \/>\r\n<br> Password\r\n<br>\r\n<input type="text" #txtPassword \/>\r\n<br>\r\n<button (click)="Login(txtUserName.value, txtPassword.value)">Login<\/button>\r\n<\/pre>\n
Ana mod\u00fcl\u00fcm\u00fcz olan “app.module.ts” sayfas\u0131na da g\u00f6z atarsak e\u011fer;<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { Route, RouterModule } from "@angular\/router";\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { SiparisComponent } from '.\/siparis\/siparis.component';\r\nimport { LoginComponent } from '.\/login\/login.component';\r\n\r\nimport { LocalStorageModule } from 'angular-2-local-storage';\r\nimport { LoginGuard } from '.\/login-guard';\r\n\r\nexport const AppRoute: Route[] = [\r\n { path: "siparis", component: SiparisComponent, canActivate: [LoginGuard] },\r\n { path: "login", component: LoginComponent }\r\n];\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n SiparisComponent,\r\n LoginComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n LocalStorageModule.withConfig({\r\n prefix: "g",\r\n storageType: "localStorage"\r\n }),\r\n RouterModule.forRoot(AppRoute)\r\n ],\r\n providers: [LoginGuard],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
Dikkat ederseniz e\u011fer “SiparisComponent”in routeunda kontrol mekanizmas\u0131 olmas\u0131 amac\u0131yla “canActivate” \u00f6zelli\u011fi ile olu\u015fturmu\u015f oldu\u011fumuz “LoginGuard” servisi belirtilmi\u015ftir. Bu \u015fekilde her “SiparisComponent” tetiklendi\u011finde \u00f6ncelikle “LoginGuard”a g\u00f6z at\u0131lacak ve aktifli\u011fi kontrol edilecektir. Ayr\u0131ca “LoginGuard” mod\u00fcl\u00fcn “providers” \u00f6zelli\u011fine eklenerek t\u00fcm uygulama i\u00e7in global bir nesne haline getirilmi\u015ftir.<\/p>\n
\u015eimdi ise s\u0131radan bir tasar\u0131m sa\u011flayacak \u015fekilde “app.component.html” dosyas\u0131na a\u015fa\u011f\u0131daki aray\u00fcz\u00fc tasarlayal\u0131m.<\/p>\n
\r\n<a routerLink="siparis">Sipari\u015f<\/a> -\r\n<a routerLink="login">Oturum A\u00e7<\/a>\r\n<div>\r\n <router-outlet><\/router-outlet>\r\n<\/div>\r\n<\/pre>\n
Uygulamay\u0131 kaydedip, yay\u0131nlad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi bir i\u015fleyi\u015fle kar\u015f\u0131la\u015faca\u011f\u0131z.<\/p>\n
$\"Angular$ <\/a><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere login yap\u0131lmadan sipari\u015f sayfas\u0131na yap\u0131lan talep neticesinde “LoginGuard” devreye giriyor ve \u00f6ncelikle oturum a\u00e7ma i\u015flemi i\u00e7in “login” sayfas\u0131na y\u00f6nlendiriyor. Login sayfas\u0131nda yap\u0131lan oturum i\u015flemi neticesinde sipari\u015f sayfas\u0131na giri\u015f ger\u00e7ekle\u015ftiriliyor.<\/p>\n
Faydalanman\u0131z 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 4 uygulamalar\u0131nda kullan\u0131c\u0131 y\u00f6nlendirmelerinde detayl\u0131 kontrol ve optimizasyon sa\u011flamam\u0131za imkan tan\u0131yan Route Guards yap\u0131s\u0131n\u0131 inceleyece\u011fiz. Route Guards Nedir? Route Guards, yukar\u0131da da bahsetti\u011fimiz gibi kullan\u0131c\u0131 y\u00f6nlendirmelerinde detayl\u0131 kontrol mekanizmas\u0131 sa\u011flamaktad\u0131rlar....<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2390,2146,2387,2389,2388,2386,2391],"class_list":["post-8239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-activatedroutesnapshot","tag-angular-4","tag-angular-route-guards-canactivate","tag-canactivate","tag-route-guards","tag-route-guards-canactivate","tag-routerstatesnapshot"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8239","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=8239"}],"version-history":[{"count":16,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8239\/revisions"}],"predecessor-version":[{"id":8256,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8239\/revisions\/8256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}