Czym są route guards?

Question

Accepted Answer

**Route guards** to funkcje kontrolujące **czy nawigacja do/z trasy jest dozwolona**. Uruchamiają się przed aktywacją trasy (lub przed jej opuszczeniem), umożliwiając kontrolę uwierzytelniania, kontrolę uprawnień i prompty "niezapisane zmiany". ## Dlaczego to ważne ```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 ``` ## Funkcjonalny guard CanActivate (nowoczesny 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 }; ``` Guard zwraca `true` (zezwól), `false` (zablokuj) lub `UrlTree` (przekieruj). Nowoczesny Angular używa **guardów funkcjonalnych** (zwykłe funkcje z `inject()`) zamiast starszych, opartych na klasach. ## Stosowanie guardów do tras ```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 — zapobieganie przypadkowej utracie danych ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Ten klasyczny guard ostrzega użytkowników przed opuszczeniem formularza z niezapisanymi zmianami. ## Guardy mogą być asynchroniczne ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Dlaczego to ważne Guardy to standardowy, scentralizowany sposób egzekwowania kontroli dostępu i reguł nawigacji w Angularze — ochrony tras uwierzytelnionej, ograniczenia na podstawie roli/uprawnień, zapobiegania utracie danych przy wyjściu oraz wstępnego ładowania danych (resolvers). Umieszczanie tych sprawdzeń w guardach (zamiast rozsianych w komponentach) utrzymuje logikę bezpieczeństwa i nawigacji spójną i deklaratywną; `authGuard` na chronionych trasach to coś, co praktycznie każda rzeczywista aplikacja Angular implementuje.