Angular Guards Kullanımı

Merhaba Arkadaşlar, bu yazımda sizlere Angular Guards Kullanımı konusundan bahsedeceğim.

Güvenlik ve kimlik doğrulama, birçok web uygulaması için önemli bir konudur. Angular Guards, yönlendirmeleri ve kimlik doğrulama işlemlerini kontrol etmek için kullanılan bir mekanizmadır. Bu blog yazısında, Angular Guards’ın nasıl kullanılacağını ve uygulamalara nasıl entegre edileceğinden bahsedeceğiz.

1. Angular Guards Nedir?
   Angular Guards, Angular yönlendirme işlemlerini kontrol etmek için kullanılan önemli bir özelliktir. Bir yönlendirme gerçekleşmeden önce belirli koşulları kontrol edebilir ve yönlendirme işlemini engelleyebilir veya devam ettirebilir. Örneğin, kullanıcı oturumu açık değilse veya belirli bir rolü yoksa, bir sayfaya erişim engellenebilir.
2. Guards Türleri
   Angular Guards, üç farklı türde gelir:
   a. CanActivate:
   Bir bileşene erişim izni vermek veya engellemek için kullanılır.
   b. CanActivateChild:
   Bir bileşenin alt bileşenlerine erişimi kontrol etmek için kullanılır.
   c. CanDeactivate:
   Bir bileşenden ayrılırken veya bir sayfadan yönlendirilirken onaylama işlemlerini kontrol etmek için kullanılır.
3. Guards Nasıl Kullanılır?
   Angular Guards’ı kullanmak için aşağıdaki adımları izleyebilirsiniz:
4. Bir Guard Oluşturma:
   Öncelikle, Guards’ı oluşturmanız gerekmektedir. Bir Guard, Angular’da Injectable özelliğini kullanarak bir sınıf olarak tanımlanır ve ilgili Guard türünü uygular. Guards, yönlendirme işleminden önce kontrol koşullarını değerlendirir. Bu koşullar, belirli bir bileşenin erişim iznini kontrol etmek için yazılır. Örneğin, kullanıcının giriş yapmış olması gerekiyorsa, bu koşul burada belirlenir. Guards, yönlendirici tarafından kullanılır. İlgili yönlendirme tanımlandığında, Guard otomatik olarak etkinleştirilir ve koşulları değerlendirir.
5. Örnek Uygulama:
   Aşağıda, bir kullanıcının sadece giriş yapmışsa bir sayfaya erişebileceği bir uygulama üzerinde Angular Guards‘ın nasıl kullanılacağını gösteren basit bir örnek bulunmaktadır. İlk olarak, CanActivate türünde bir Guard oluşturun ve giriş yapılıp yapılmadığını kontrol edin. Guard’ı yönlendiriciyle entegre edin ve ilgili sayfaya uygulayın. Uygulamanızı çalıştırın ve belirli bir sayfaya giriş yapmadan erişmeye çalışın. Guard, giriş yapılmamışsa erişimi engelleyecektir.

Örnek Kod:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

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

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isLoggedIn()) {
      return true; // Kullanıcı oturumu açıksa erişime izin ver
    } else {
      this.router.navigate(['/login']); // Kullanıcı oturumu kapalıysa login sayfasına yönlendir
      return false;
    }
  }

}

AuthService Oluşturma:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private isLoggedInFlag: boolean = false;

  constructor() { }

  isLoggedIn(): boolean {
    return this.isLoggedInFlag;
  }

  login() {
    // Kullanıcı oturum açma işlemleri burada gerçekleştirilir
    this.isLoggedInFlag = true;
  }

  logout() {
    // Kullanıcı oturumu kapatma işlemleri burada gerçekleştirilir
    this.isLoggedInFlag = false;
  }

}

Uygulama Yönlendirme ayarları:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Bu örnekte, AuthGuard adında bir Guard oluşturduk. CanActivate arayüzünü uygulayarak canActivate metodunu yazdık. Bu metod, AuthService servisini kullanarak kullanıcının oturum açıp açmadığını kontrol eder. Kullanıcı oturumu açıksa true döner ve sayfaya erişime izin verilir. Kullanıcı oturumu kapalıysa false döner ve /login sayfasına yönlendirilir.

Uygulama yönlendirme ayarlarında (AppRoutingModule), AuthGuard‘ı canActivate özelliğiyle birlikte belirtilen sayfalara uyguladık. Örneğin, anasayfa ('') için AuthGuard‘ı etkinleştirdik. Böylece kullanıcı sadece oturum açmışsa ana sayfaya erişebilir, aksi halde login sayfasına yönlendirilir.

Bu örnek, kullanıcının oturum durumuna bağlı olarak yönlendirmeleri kontrol etmek için Angular Guards‘ı nasıl kullanabileceğinizi göstermektedir. Örnek, gerçek uygulama senaryolarına göre daha basit bir yapıda olsa da, temel prensipleri anlamak için yeterli olacaktır.

Angular Guards, yönlendirme işlemlerini kontrol etmek ve kimlik doğrulama işlemlerini uygulamak için kullanışlı bir araçtır. Bu yazıda, Guards’ın ne olduğunu, nasıl kullanılacağını ve bir örnek uygulama üzerinde nasıl entegre edileceğini uygulamış olduk. Angular Guards, uygulamanızın güvenliğini artırmak ve kullanıcı deneyimini iyileştirmek için önemli bir bileşendir.

Umarım bu örnek blog yazısı size yardımcı olur.

Bir sonraki yazıda görüşmek üzere…