Angular 4 – Route Guards CanActivate

Merhaba,

Bu içeriğimizde Angular 4 uygulamalarında kullanıcı yönlendirmelerinde detaylı kontrol ve optimizasyon sağlamamıza imkan tanıyan Route Guards yapısını inceleyeceğiz.

Route Guards Nedir?

Route Guards, yukarıda da bahsettiğimiz gibi kullanıcı yönlendirmelerinde detaylı kontrol mekanizması sağlamaktadırlar. Bu yapılara en güzel örneği oturum açma durumları üzerinden verebiliriz. Eğer ki bir kullanıcı oturum açmadan sipariş vermeye yahut oturum gerektiren herhangi bir işlem yapmaya yelteniyorsa burada Route Guards devreye girecek, oturum girişini sağlayabilmek için gerekli login sayfasına yönlendirecek ve oturum açıldıktan sonra gelinen sayfaya tekrar yönlendirerek kalınan noktadan devam edilmesini sağlayacaktır.

Buradan; Route Guards, kontrol edilen sayfanın o anki aktiflik durumunu değerlendiriyor diyebiliriz. Bu değerlendirme sürecinde sayfa aktif değilse aktifleştirme işlemi için bir başka sayfaya yönlendirmektedir. Tabi bu işlem akabinde gelinen sayfaya tekrar yönlendirme sağlanacağı için hangi sayfadan gelindiği bilgisinide bizlere sunacaktır.

Dolayısıyla bu işlemleri yapabilmek için “CanActivate”, “ActivatedRouteSnapshot” ve “RouterStateSnapshot” olmak üzere üç farklı modülden yararlanacağız.

  • CanActivate
    Eğer bir sınıfın Guard olması isteniyorsa ilgili sınıf CanActivate interface’inden implement ediliyor olması gerekmektedir.
  • ActivatedRouteSnapshot
    Kullanıcının gitmek istediği route’u tutmaktadır.
  • RouterStateSnapshot
    Kullanıcının geldiği route’u tutmaktadır.

Şimdi Route Guards ile ilgili bir örnek üzerinden gidelim.

Yukarıdaki satırlarda oturum açma üzerinden teorik örneklendirmede bulunduğumuz için benzer konu üzerinden bir senaryo ile konumuzu pratik olarak örneklendirelim.

İlk olarak login işlemleri için Guard görevi görecek “LoginGuard” isimli sınıfımızı inşa edelim.

import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { LocalStorageService } from 'angular-2-local-storage';

@Injectable()
export class LoginGuard implements CanActivate {
    constructor(private localStorageService: LocalStorageService, private router: Router) {
    }

    canActivate(gidilecekSayfa: ActivatedRouteSnapshot, gelinenSayfa: RouterStateSnapshot): boolean {
        if (this.localStorageService.get("userName") == "gncy" && this.localStorageService.get("password") == "1234")
            return true;
            
        this.router.navigate(["login"]);
        return false;
    }
}

Dikkat ederseniz bu sınıf “Injectable” interface’inden declare edilerek bir servis şeklinde tasarlanmıştır ve “CanActivate” interface’inden dolayı geri boolean tipinde değer dönen “canActivate” fonksiyonu implement edilmiştir. Bu fonksiyon “true” değeri dönerse işlem yapılan sayfada oturum açık manasına gelecektir. Yok eğer “false” değeri dönerse öncelikle oturum açılma sayfasına yönlendirilecek, oturum açıldıktan sonra ardından işlem yapılacak sayfaya tekrar yönlendirme gerçekleştirilecektir.

Burada oturum işlemleri için Angular 4 – Local Storage Kullanımı başlıklı makalede değindiğim yerel depo birimini kullandığımı hatırlatmak isterim.

Ardından oturum işlemi için kullanacağımız “LoginComponent” sayfasını oluşturalım.

import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from 'angular-2-local-storage';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  constructor(private localStorageService: LocalStorageService) { }
  Login(userName, password) {
    this.localStorageService.set("userName", userName);
    this.localStorageService.set("password", password);
  }
  ngOnInit() {
  }
}

Bu sayfanın görüntüsünü oluşturalım.

User Name
<br>
<input type="text" #txtUserName />
<br> Password
<br>
<input type="text" #txtPassword />
<br>
<button (click)="Login(txtUserName.value, txtPassword.value)">Login</button>

Ana modülümüz olan “app.module.ts” sayfasına da göz atarsak eğer;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Route, RouterModule } from "@angular/router";

import { AppComponent } from './app.component';
import { SiparisComponent } from './siparis/siparis.component';
import { LoginComponent } from './login/login.component';

import { LocalStorageModule } from 'angular-2-local-storage';
import { LoginGuard } from './login-guard';

export const AppRoute: Route[] = [
  { path: "siparis", component: SiparisComponent, canActivate: [LoginGuard] },
  { path: "login", component: LoginComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    SiparisComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    LocalStorageModule.withConfig({
      prefix: "g",
      storageType: "localStorage"
    }),
    RouterModule.forRoot(AppRoute)
  ],
  providers: [LoginGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dikkat ederseniz eğer “SiparisComponent”in routeunda kontrol mekanizması olması amacıyla “canActivate” özelliği ile oluşturmuş olduğumuz “LoginGuard” servisi belirtilmiştir. Bu şekilde her “SiparisComponent” tetiklendiğinde öncelikle “LoginGuard”a göz atılacak ve aktifliği kontrol edilecektir. Ayrıca “LoginGuard” modülün “providers” özelliğine eklenerek tüm uygulama için global bir nesne haline getirilmiştir.

Şimdi ise sıradan bir tasarım sağlayacak şekilde “app.component.html” dosyasına aşağıdaki arayüzü tasarlayalım.

<a routerLink="siparis">Sipariş</a> -
<a routerLink="login">Oturum Aç</a>
<div>
  <router-outlet></router-outlet>
</div>

Uygulamayı kaydedip, yayınladığımızda aşağıdaki gibi bir işleyişle karşılaşacağız.

Angular 4 - Route Guards CanActivate

Görüldüğü üzere login yapılmadan sipariş sayfasına yapılan talep neticesinde “LoginGuard” devreye giriyor ve öncelikle oturum açma işlemi için “login” sayfasına yönlendiriyor. Login sayfasında yapılan oturum işlemi neticesinde sipariş sayfasına giriş gerçekleştiriliyor.

Faydalanmanız dileğiyle…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 23 Haziran 2018

    […] önceki Angular 4 – Route Guards CanActivate başlıklı makalemde Angular uygulamalarında Route Guards yapısından söz ederek CanActivate […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*