¿Qué son los Route Guards?

Question

Accepted Answer

**Route guards** son funciones que controlan **si la navegación hacia/desde una ruta está permitida**. Se ejecutan antes de que una ruta se active (o antes de que la abandone), permitiendo comprobaciones de autenticación, control de permisos e indicaciones de "cambios sin guardar". ## Los tipos de guard ```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 funcional (Angular moderno) ```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 }; ``` Un guard devuelve `true` (permitir), `false` (bloquear) o una `UrlTree` (redirigir). Angular moderno utiliza **guards funcionales** (funciones simples con `inject()`) en lugar de los más antiguos basados en clases. ## Aplicar guards a las rutas ```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 — prevenir pérdida accidental de datos ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Este guard clásico advierte a los usuarios antes de que naveguen fuera de un formulario con cambios sin guardar. ## Los guards pueden ser asincronos ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Por qué es importante Los guards son la forma estándar y centralizada de imponer control de acceso y reglas de navegación en Angular — protegiendo rutas autenticadas, limitando por rol/permiso, previniendo pérdida de datos al salir y precargando datos (resolvers). Colocar estas comprobaciones en guards (en lugar de dispersas en componentes) mantiene la lógica de seguridad y navegación consistente y declarativa; el `authGuard` en rutas protegidas es algo que prácticamente todas las aplicaciones Angular reales implementan.