Guardas de rutas en Angular

En esta lección se explica cómo proteger las rutas en aplicaciones de Angular mediante guardas de rutas.

¿Qué son las guardas de rutas?

Las guardas de rutas controlan el acceso a las rutas en Angular. Son útiles para proteger rutas sensibles o restringidas.

Tipos de guardas

• CanActivate: determina si se puede activar una ruta.
• CanActivateChild: protege las rutas secundarias.
• CanDeactivate: comprueba las condiciones antes de abandonar una ruta.
• Resolve: obtiene datos previamente antes de activar la ruta.

Crear una guarda

Cree una guarda mediante Angular CLI:

ng generate guard auth

Implementar canActivate()

El método canActivate() controla el acceso a la ruta:

canActivate(): boolean {
  return true; // or false to block navigation
}

Usar guardas en las rutas

Añada guardas a las rutas en el módulo de enrutamiento:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

Guarda CanDeactivate

CanDeactivate impide abandonar una ruta si no se cumplen ciertas condiciones; resulta útil para los formularios:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Guarda Resolve

La guarda Resolve obtiene datos antes de cargar una ruta:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

Resumen

Ha aprendido a proteger y mejorar la navegación en sus aplicaciones de Angular mediante guardas de rutas. ¡Siga adelante!