Ce sunt route guards?

Question

Accepted Answer

**Route guards** sunt funcții care controlează **dacă navigarea către/de la o rută este permisă**. Se execută înainte ca o rută să se activeze (sau înainte să o părasești), permițând verificări de autentificare, control de permisiuni și prompturi "modificări nesalvate". ## Tipurile de gărzi ```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 ``` ## Un guard CanActivate funcțional (Angular modern) ```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 }; ``` O gardă returnează `true` (permite), `false` (blochează) sau o `UrlTree` (redirecționează). Angular modern folosește **gărzi funcționale** (funcții simple cu `inject()`) în loc de cele mai vechi bazate pe clase. ## Aplicarea gărzilor pe rute ```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 — previne pierderea accidentală de date ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Această gardă clasică avertizează utilizatorii înainte de a se îndepărta de la un formular cu modificări nesalvate. ## Gărzile pot fi asincrone ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## De ce este important Gărzile sunt modul standard, centralizat de aplicare a controlului accesului și a regulilor de navigare în Angular — protejând rutele autentificate, restricționând după rol/permisiune, prevenind pierderea de date la ieșire și pre-încărcând date (resolvers). Plasarea acestor verificări în gărzi (în loc să fie împrăștiate în componente) menține logica de securitate și navigare consistentă și declarativă; `authGuard` pe rutele protejate este ceva pe care practic fiecare aplicație Angular reală o implementează.