Angular Academy · Lección

Protectores de rutas funcionales

Proteger rutas con protectores funcionales

Protectores de rutas funcionales es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Qué son los guards de ruta

Los guards deciden si la navegación puede continuar: protegen rutas mediante autenticación, solicitan confirmación antes de abandonar un formulario o restringen el acceso según el rol. Angular moderno usa guards funcionales: funciones sencillas, sin clases.

CanActivateFn

Un CanActivateFn devuelve true para permitir el acceso, false para bloquearlo, un UrlTree para redirigir, o un observable o promise de cualquiera de esos valores.

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

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

Conectar un guard a una ruta

Asocie los guards con canActivate (es un array, por lo que puede encadenar varios).

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

Redirigir con UrlTree

Devolver un UrlTree (desde router.createUrlTree o parseUrl) bloquea y redirige en un solo paso.

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

Guards asíncronos

Los guards pueden devolver un observable; el router espera el primer valor y después lo completa.

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

Acceder a la información de la ruta en un guard

Una CanActivateFn recibe ActivatedRouteSnapshot y RouterStateSnapshot, por lo que puede leer los parámetros, los datos y la URL solicitada.

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

Guards canMatch

CanMatchFn decide si una definición de ruta coincide en absoluto; resulta útil para intercambiar rutas mediante un indicador de funcionalidad o cargar de forma diferida solo cuando está permitido.

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

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

Guards canDeactivate

CanDeactivateFn se ejecuta al salir de una ruta, por lo que es perfecto para confirmar cambios sin guardar. Recibe la instancia del componente.

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

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

Encadenar varios guards

Todos los guards del array deben permitir la navegación. Se ejecutan conjuntamente; si alguno devuelve false o un UrlTree, la navegación se bloquea o se redirige.

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

Por qué usar guards funcionales en lugar de guards basados en clases

Los guards funcionales son más sencillos: no requieren código repetitivo de @Injectable, permiten usar inject() fácilmente, se pueden componer y admiten tree-shaking. Las interfaces CanActivate basadas en clases están obsoletas.

Guards y rutas hijas

canActivateChild protege todas las rutas hijas de un elemento principal desde un único lugar, evitando repetir el guard en cada hija.

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

Comprobación rápida

Compruebe su comprensión de los guards funcionales.

Resumen: guards funcionales de rutas

Los guards funcionales controlan la navegación mediante funciones simples.

CanActivateFn: permite, bloquea o redirige (UrlTree).
CanMatchFn: determina si una ruta coincide.
CanDeactivateFn: confirma la salida.
Use inject() para los servicios y encadene los guards en arrays.

Siguiente: eventos del router y navegación.

Preguntas frecuentes

¿La lección «Protectores de rutas funcionales» es gratis?

Sí — el texto completo de «Protectores de rutas funcionales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Protectores de rutas funcionales»?

Proteger rutas con protectores funcionales Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Protectores de rutas funcionales»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Parámetros de ruta y parámetros de consulta
Resolvers y datos de ruta
Protectores de rutas funcionales
Eventos del router y navegación

← Volver a Angular Academy