Angular Route Guards

Bu makalede, Angular uygulamamızda oluşturduğumuz rotalara doğru kişiler tarafından erişildiğinden nasıl emin olabileceğimize ve özel olan rotalara yetkisiz erişimi nasıl önleyebileceğimize bakacağız

Kullanıcıların oturum açıp açmadığını kontrol etmek için basit bir if ifadesi kullanma şansınız var ve bu bir veya iki kullanım durumu için işe yarıyor. Buradaki sorun, uygulamanız büyüdükçe ve daha fazla bileşen eklendikçe bunun bir kod tekrarı haline gelmesidir. Angular, bunun için çözmek için guardlar sağlar. Guardlar, arayüz sınıfında sağladığımız koşullara dayalı olarak rotalara erişimi kontrol etmemize izin veren, Angular’da zaten mevcut olan arayüzlerdir.

Angular router’larının gezinme guardları, gezinmenin belirli bölümlerine erişim izni verilmesine veya erişimin kaldırılmasına izin verir. Başka bir rota guardı olan CanDeActive guard, kullanıcının bir bileşeni yanlışlıkla kaydedilmemiş değişikliklerle terk etmesini engellemenize bile izin verir.

İşte mevcut 4 tür yönlendirme guardı:

• CanActivate: Bir rotanın etkinleştirilip etkinleştirilemeyeceğini kontrol eder.temel olarak şu soruyu yanıtlar: “Kullanıcının bu rotaya erişimi var mı?” Bu guardı, bir rotaya erişim yetkisi olmayan kullanıcıların erişimini engellemek için kullanıyoruz.
• CanActivateChild: Bir rotanın alt öğelerinin etkinleştirilip etkinleştirilemeyeceğini kontrol eder.
• CanLoad: Bir rotanın yüklenip yüklenemeyeceğini kontrol eder. Bu, geç yüklenen özellik modülleri için kullanışlı hale gelir. Guard yanlış döndürürse yüklenmeyecekler bile.
• CanDeactive: Kullanıcının bir rotadan ayrılıp ayrılamayacağını kontrol eder. Bu guardın, kullanıcının tarayıcı sekmesini kapatmasını veya farklı bir adrese gitmesini engellemediğini unutmayın. Yalnızca uygulamanın kendi içinden eylemleri engeller.

CanActivate Route Guard’ı Kullanma

Rota guardları, genellikle gerekli yol guard interfaceini uygulayan sınıflar olarak uygulanır.

can-activate-route.guard.ts:

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

@Injectable()
export class CanActivateRouteGuard implements CanActivate {
  constructor(private auth: AuthService) {}

Bir canActivate yöntemi bildirerek CanActivate interfaceini nasıl uyguladığımıza dikkat edin. Geçerli rota hakkında bilgiye ihtiyaç duyacağınız durumlarda, yöntemin isteğe bağlı olarak ActivatedRouteSnapshot ve RouterStateSnapshot’a erişimi vardır.

Örneğimizde, canActivate, kullanıcının kimliğinin doğrulanıp doğrulanmadığına bağlı olarak bir boolean döndürür, ancak bir gözlemlenebilir veya bir boolean çözümleyen bir vaat de döndürebilirdi. Bunları kullanabilmek için rota guardları gibi service sunulmalıdır. Uygulama modülümüzün sağlayıcılarına ekleyelim:

app.module.ts

// ...
import { AppRoutingModule } from './app-routing.module';
import { CanActivateRouteGuard } from './can-activate-route.guard';

import { AuthService } from './auth.service';

Ve son olarak, yönlendirme yapılandırmanızın bir parçası olarak guardı eklemek isteyeceksiniz. İşte bir yönlendirme(routing) modülü ile bir örnek:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard.component';
import { CanActivateRouteGuard } from './can-activate-route.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard',
    component: DashboardComponent,
    canActivate: [CanActivateRouteGuard]
  }
];

Artık yalnızca kimliği doğrulanmış kullanıcılar /dashboard yolunu etkinleştirebilir. Rota tanımında nasıl bir koruma dizisi sağladığımıza dikkat edin. Bu, tek bir rota için birden çok koruma belirtebileceğimiz ve bunların belirtildikleri sırayla değerlendirileceği anlamına gelir. CanLoad ve CanActivateChild’in uygulanması benzer şekilde gerçekleştirilir.

CanDeActive Route Guard’ı Kullanma

CanDeActive guardı, bileşenin devre dışı bırakılmasını sağlamamız gerektiğinden, uygulanmasında küçük bir farka sahiptir. Bu, kaydedilmemiş değişiklikler gibi bir şey olup olmadığını görmek için söz konusu bileşeni incelememizi sağlar.

Örnek:

can-deactive-route.guard.ts

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

import { DashboardComponent } from './dashboard.component';

Yukarıdaki örnekte, pano bileşen sınıfında, kaydedilmemiş değişiklikler olduğunda doğru hale gelen, kaydedilmemiş Değişiklikler adlı bir üye olduğunu varsayıyoruz. Kaydedilmemiş değişiklik olmadıkça veya kullanıcı onaylamadıkça rota devre dışı bırakılmaz.