Rota koruyucuları nedir?

Question

Accepted Answer

**Rota koruyucuları**, **bir rotaya/rotadan navigasyonun izin verilip verilmediğini kontrol eden** işlevlerdir. Bir rota etkinleştirilmeden (veya ayrılmadan) önce çalışarak kimlik doğrulama kontrollerini, izin denetimini ve "kaydedilmemiş değişiklikler" istemlerini etkinleştirirler. ## Koruyucu türleri ```text CanActivate → can the user enter this route? (auth/permission check) CanActivateChild → same, for child routes CanDeactivate → can the user LEAVE? ("you have unsaved changes") CanMatch → should this route even be matched? (feature flags, role-based) resolve → pre-fetch data BEFORE the route activates ``` ## İşlevsel bir CanActivate koruyucu (modern Angular) ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // allow navigation } return router.createUrlTree(["/login"]); // redirect to login }; ``` Bir koruyucu `true` (izin ver), `false` (engelle) veya `UrlTree` (yönlendir) döndürür. Modern Angular, eski sınıf tabanlı olanlar yerine **işlevsel koruyucuları** (`inject()` ile düz işlevler) kullanır. ## Rotalara koruyucu uygulamak ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // protect this route }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // only match for admins }, ]; ``` ## CanDeactivate — kazayla veri kaybını önlemek ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Bu klasik koruyucu, kullanıcıları kaydedilmemiş düzenlemeler içeren bir formdan ayrılmadan önce uyarır. ## Koruyucular asenkron olabilir ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Neden önemli Koruyucular, Angular'da erişim denetimi ve navigasyon kurallarını uygulamak için standart, merkezi yoldur — kimliği doğrulanmış rotaları korumak, rol/izne göre kısıtlama yapmak, çıkış sırasında veri kaybını önlemek ve verileri önceden yüklemek (resolvers). Bu kontrolleri koruyuculara koymak (bileşenlere dağılmış olmak yerine) güvenlik ve navigasyon mantığını tutarlı ve bildirimsel tutar; korunan rotalardaki `authGuard` neredeyse her gerçek Angular uygulamasının uyguladığı bir şeydir.