Angular Academy · Ders

İşlevsel Rota Korumaları

İşlevsel korumalarla rotaları koruyun

İşlevsel Rota Korumaları, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Yol korumaları nedir

Koruma işlevleri, gezinmenin devam edip edemeyeceğine karar verir: yolları kimlik doğrulamayla korur, bir formdan ayrılmadan önce onay ister veya erişimi role göre sınırlar. Modern Angular, sınıflar yerine basit işlevler olan işlevsel korumaları kullanır.

CanActivateFn

Bir CanActivateFn, izin vermek için true, engellemek için false, yeniden yönlendirmek için UrlTree veya bunlardan birini üreten bir gözlemlenebilir ya da vaat döndürür.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

Bir guard'ı route'a bağlama

Guard'ları canActivate ile ekleyin (bir dizi olduğundan birden fazlasını art arda kullanabilirsiniz).

export const routes = [
  { path: 'dashboard', component: DashboardComponent,
    canActivate: [authGuard] }
];

UrlTree ile yeniden yönlendirme

Bir UrlTree döndürmek (router.createUrlTree veya parseUrl ile) hem erişimi engeller hem de tek adımda yeniden yönlendirir.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

Asenkron guard'lar

Guard'lar bir observable döndürebilir; yönlendirici ilk değeri bekler, ardından tamamlanır.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

Bir guard'da route bilgilerine erişme

Bir CanActivateFn, ActivatedRouteSnapshot ve RouterStateSnapshot alır; böylece parametreleri, verileri ve denenmekte olan URL'yi okuyabilirsiniz.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

canMatch guard'ları

CanMatchFn, bir route tanımının eşleşip eşleşmeyeceğine karar verir. Bu, özellik bayrağına göre route'ları değiştirmek veya yalnızca izin verildiğinde lazy-load uygulamak için kullanışlıdır.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

canDeactivate guard'ları

CanDeactivateFn, bir route'tan ayrılırken çalışır; kaydedilmemiş değişiklikleri onaylatmak için idealdir. Bileşen örneğini alır.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

Birden çok guard'ı art arda kullanma

Dizideki tüm guard'ların gezinmeye izin vermesi gerekir. Birlikte çalışırlar; herhangi biri false veya bir UrlTree döndürürse gezinme engellenir ya da yeniden yönlendirilir.

canActivate: [authGuard, roleGuard]
// both must pass

İşlev tabanlı guard'lar neden sınıf tabanlı guard'lara tercih edilir

İşlev tabanlı guard'lar daha basittir: @Injectable için kalıp kod gerekmez, inject() kullanımı kolaydır, birleştirilebilir ve tree-shakable'dır. Sınıf tabanlı CanActivate arabirimleri kullanımdan kaldırılmıştır.

Guard'lar ve alt route'lar

canActivateChild, bir üst route'un tüm alt route'larını tek bir yerde korur; guard'ı her alt route'ta tekrarlamanızı önler.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

Hızlı Kontrol

İşlev tabanlı guard'lar hakkındaki anlayışınızı test edin.

Özet: İşlev Tabanlı Route Guard'ları

İşlev tabanlı guard'lar, düz işlevlerle gezinmeyi denetler.

CanActivateFn: izin verme/engelleme/yeniden yönlendirme (UrlTree).
CanMatchFn: bir route'un eşleşip eşleşmeyeceğini belirler.
CanDeactivateFn: ayrılmayı onaylar.
Servisler için inject() kullanın; guard'ları dizilerde art arda kullanın.

Sırada: yönlendirici olayları ve gezinme.

Sıkça Sorulan Sorular

“İşlevsel Rota Korumaları” dersi ücretsiz mi?

Evet — “İşlevsel Rota Korumaları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“İşlevsel Rota Korumaları” dersinde ne öğreneceğim?

İşlevsel korumalarla rotaları koruyun Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“İşlevsel Rota Korumaları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Rota Parametreleri ve Sorgu Parametreleri
Çözümleyiciler ve Rota Verileri
İşlevsel Rota Korumaları
Yönlendirici Olayları ve Gezinme

← Angular Academy Sayfasına Dön