Angular Route Guards

Bu yazıda, Angular Route Guards’ın ne olduğunu, nasıl çalıştığını ve projelerinizde pratik bir şekilde nasıl kullanabileceğinizi adım adım inceleyeceğiz. Route Guards sayesinde uygulamanızda erişim kısıtlamaları oluşturabilir, yetkisiz kullanıcıları önleyerek daha güvenli bir yapı kurabilirsiniz.

Angular Route Guards ile güvenli ve kullanıcı dostu bir deneyim sunmak için belirli rotalara erişimi kontrol etmek mümkündür. İşte Route Guards ile çözülebilecek bazı senaryolar:

• Oturum Kontrolü: Kullanıcının oturum açıp açmadığını denetleme.
• Yetki Kontrolü: Kullanıcının belirli bir role sahip olup olmadığını doğrulama.
• Form Tamamlama: Bir formun kaydedilmeden önce tamamlanıp tamamlanmadığını kontrol etme.

Angular Route Guard Türleri:

• CanActivate: Bir rotanın erişime açık olup olmadığını kontrol eder.
• CanActivateChild: Alt rotaların aktif hale gelip gelemeyeceğini denetler.
• CanDeactivate: Kullanıcı bir rotadan ayrılmak istediğinde kontrol sağlar (örneğin, kaydedilmemiş değişiklik uyarıları).
• CanLoad: Asenkron yüklenen modüllerin yüklenip yüklenemeyeceğini kontrol eder.
• Resolve: Route yüklenmeden önce gerekli verilerin getirildiğini garanti eder. Örneğin, rota açılmadan önce API’den veri getirilmesi gerekiyorsa bu guard tercih edilir.

Route Guards Oluşturma

Angular CLI ile guard oluşturmak oldukça kolaydır. Aşağıdaki komut ile gerekli dosya yapısı ve temel kod otomatik olarak oluşturulur:

ng generate guard [guard_name]

Bu işlem sonucunda guard_name.guard.ts dosyası oluşturulur ve ilgili TypeScript sınıfı, gerekli yöntemlerle birlikte hazır hale getirilir. Artık bu guard üzerinde mantıksal kontroller yaparak uygulamanızdaki rotalara erişimi yönetebilirsiniz.

Route Guards Nasıl Kullanılır?

CanActivate Guard ile Oturum Kontrolü Örneği

Guard sınıfı oluşturarak kullanıcının oturum durumunu kontrol etmek ve gerekirse giriş sayfasına yönlendirmek mümkündür.

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Bu guard’ı bir rota tanımında kullanmak için:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent }
];

Bu örnekte, kullanıcı oturum açmamışsa /dashboard rotasına erişim engellenir ve kullanıcı /login sayfasına yönlendirilir.

CanDeactivate Guard ile Kaydedilmemiş Değişiklikleri Kontrol Etme

CanDeactivate guard, kullanıcı bir rotadan ayrılmak istediğinde belirli kontroller yaparak geçişi onaylamasını sağlar.

Guard Tanımı (unsaved-changes.guard.ts):

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable({
  providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): boolean | Observable<boolean> {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

Form Bileşenine Guard Eklenmesi:

import { Component } from '@angular/core';
import { CanComponentDeactivate } from './unsaved-changes.guard';

@Component({
  selector: 'app-edit-form',
  template: `<h2>Edit Form</h2>`
})
export class EditFormComponent implements CanComponentDeactivate {

  formDirty = true; // Varsayılan olarak kirli form simülasyonu

  canDeactivate(): boolean {
    return this.formDirty
      ? confirm('Kaydedilmemiş değişiklikler var. Yine de çıkmak istiyor musunuz?')
      : true;
  }
}

Rota Tanımı (app-routing.module.ts):

const routes: Routes = [
  { path: 'edit', component: EditFormComponent, canDeactivate: [UnsavedChangesGuard] }
];

Kullanıcı bir form üzerinde çalışırken sayfadan ayrılmaya çalıştığında, confirm() ile uyarı gösterilir. Eğer kullanıcı Evet derse rota geçişine izin verilir, aksi takdirde sayfa aynı kalır. Bu guard, veri kaybını önlemek için form tabanlı uygulamalarda sıkça kullanılır.

CanLoad Guard ile Modül Yükleme Kontrolü

CanLoad guard, kullanıcıların belirli koşullara bağlı olarak modülleri yükleyip yükleyemeyeceğini kontrol eder. Bu özellikle asenkron modüllerin (lazy-loaded) güvenliği ve erişim yönetimi için kullanılır.

import { Injectable } from '@angular/core';
import { CanLoad, Route, Router, UrlSegment } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthLoadGuard implements CanLoad {

  constructor(private authService: AuthService, private router: Router) {}

  canLoad(route: Route, segments: UrlSegment[]): boolean | Observable<boolean> {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Bu guard’ı bir rota tanımında kullanmak için:

const routes: Routes = [
  { 
    path: 'admin', 
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), 
    canLoad: [AuthLoadGuard] 
  },
  { path: 'login', component: LoginComponent }
];

canLoad() metodu modül yüklenmeden önce çalışarak oturum doğrulaması yapar; kullanıcı yetkisizse yönlendirme sağlanırken yetkili kullanıcılar için modül yüklenir, böylece hem güvenlik hem de performans artışı sağlanır.

Route Guards’ın Avantajları

• Güvenlik: Yetkisiz erişimi engelleyerek uygulamanın güvenliğini artırır.
• Kullanıcı Deneyimi: Doğru sayfalara yönlendirme yaparak daha akıcı bir deneyim sağlar.
• Esneklik: Farklı senaryolara uygun özelleştirilebilir guard’lar oluşturulabilir.

Sonuç

Angular Route Guards, güvenlik ve kullanıcı deneyimi açısından önemli bir araçtır. CanActivate, CanDeactivate, CanActivateChild ve CanLoad gibi guard türleri sayesinde rotalar üzerinde tam kontrol sağlayabilirsiniz. Projelerinizi daha güvenli ve kullanıcı dostu hale getirmek için bu yapıyı değerlendirebilirsiniz. 🚀