Bu yazıda, guard’ların ne olduğunu, CLI ile nasıl oluşturulacağını ve kod içerisinde nasıl kullanılacağını ele alacağız.
Angular’da guard, bir rotaya erişim izni verip vermeme konusunda karar almanızı sağlayan bir servistir. Başka bir deyişle, belirli şartlar altında kullanıcıların belirli bir rotaya erişimini sınırlamak istediğinizde guard’ları kullanabilirsiniz.
Guard’lar sayesinde:
⇒ Kullanıcının oturum açıp açmadığını kontrol ederek özel rotalara erişimi kısıtlayabilirsiniz.
⇒ Belirli bir role sahip kullanıcılara özel rotalara erişim izni verebilirsiniz.
⇒ Uygulama içerisindeki bazı verilere göre rota erişimini dinamik bir şekilde yönetebilirsiniz.
Guard Örnekleri
Angular CLI ile kolayca guard oluşturabilirsiniz. Örneğin, AuthGuard adında bir guard oluşturmak için aşağıdaki komutu kullanabilirsiniz:
|
1 2 3 |
ng generate guard auth |
Bu komut ile oluşturulan guard, CanActivate interface’ini implemente eder. Eğer farklı bir guard türü (CanLoad, CanDeactivate vb.) oluşturmak isterseniz, CLI’ye bu bilgiyi verebilirsiniz:
|
1 2 3 |
ng g guard auth --implements CanLoad |
Angular’da farklı guard türleri vardır ve her biri, uygulamadaki rotaların farklı yönleriyle ilgilenir. İşte bu guard türlerinin temel farkları:
CanActivate:
Bu guard, bir rota etkinleştirilmeden önce kontrol edilir. Örneğin, belirli bir rota veya bileşene erişim izni olup olmadığını kontrol etmek için kullanılır. Genellikle kullanıcının giriş yapıp yapmadığını veya belirli bir role sahip olup olmadığını kontrol etmek için kullanılır.
CanLoad:
Bu guard, bir modülün tembel yüklemesi (lazy loading) gerçekleşmeden önce kontrol edilir. Tembel yüklenen bir modülü yükleyip yüklememe kararı almak için kullanılır. Örneğin, kullanıcıya sadece giriş yaptığında bazı özelliklere erişim izni vermek istiyorsanız (ve bu özellikler tembel yüklenen bir modülde bulunuyorsa) CanLoad guard’ını kullanabilirsiniz.
CanDeactivate:
Bu guard, bir rota veya bileşenden ayrılmadan önce kontrol edilir. Kullanıcıyı, o sayfada yaptığı değişiklikleri kaybetme riskiyle karşı karşıya bırakmadan önce bir uyarı vermek veya kullanıcının belirli şartlar altında bir rotadan ayrılmasını engellemek için kullanılır. Örneğin, bir formda değişiklik yaptıktan sonra kullanıcıyı bu değişiklikleri kaydedilmeden sayfayı terk etmeme konusunda uyarabilirsiniz.
AuthGuard: Kullanıcının giriş yapıp yapmadığını kontrol eder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Injectable } from '@angular/core'; import { CanActivate, Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private router: Router) {} canActivate(): boolean { const isAuthenticated = // kullanıcı giriş yapmış mı kontrolü (örn: bir servisten gelen bilgi) if (isAuthenticated) { return true; } else { this.router.navigate(['/login']); return false; } } } |
RoleGuard: Kullanıcının belirli bir role sahip olup olmadığını kontrol eder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Injectable } from '@angular/core'; import { CanActivate, Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class RoleGuard implements CanActivate { constructor(private router: Router) {} canActivate(): boolean { const userRole = // kullanıcının rolü (örn: bir servisten gelen bilgi) if (userRole === 'admin') { return true; } else { this.router.navigate(['/not-authorized']); return false; } } } |
DataGuard: Bazı dinamik verilere göre rota erişimini kontrol eder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Injectable } from '@angular/core'; import { CanActivate } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class DataGuard implements CanActivate { canActivate(): boolean { const someDataCondition = this.checkSomeDataCondition(); return someDataCondition; } checkSomeDataCondition(): boolean { // Örnek olarak basit bir koşul koyuyoruz. Gerçekte bu, bir servisten gelen veriye dayalı olabilir. return Math.random() > 0.5; // Rastgele bir şart; yarıdan büyük olasılıkla "true" döner. } } |
Bu örnekte, checkSomeDataCondition metodu rastgele bir değer döndürmektedir. Ancak gerçekte bu fonksiyon, API çağrıları veya lokal veriye dayalı daha karmaşık bir şart kontrolü gerçekleştirebilir.
Bu guard’ları rotanızda kullanmak için:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AuthGuard } from './auth.guard'; import { RoleGuard } from './role.guard'; <span class="hljs-keyword">import</span> { <span class="hljs-title class_">DataGuard</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'./data.guard'</span>; const routes: Routes = [ { path: 'private-page', component: PrivatePageComponent, canActivate: [AuthGuard] }, { path: 'admin-page', component: AdminPageComponent, canActivate: [RoleGuard] }, { <span class="hljs-attr"> path</span>: <span class="hljs-string">'data-dependent-page'</span>, <span class="hljs-attr"> component</span>: <span class="hljs-title class_">DataDependentPageComponent</span>, <span class="hljs-attr"> canActivate</span>: [<span class="hljs-title class_">DataGuard</span>] } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} |
Guard’lar, Angular’da rota erişimini yönetmek için oldukça güçlü araçlardır. Gerek oturum kontrolü, gerekse belirli koşullara göre rota erişimini sınırlamak için Angular guard’larını kullanabilirsiniz.
Umarım “Angular Guard’lar: Route Koruma ve Kullanıcı Yetkilendirme” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
Happy coding!
