Guardias canActivate en Angular: Proteger rutas con autenticación

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:09

Guardias canActivate en Angular: Proteger rutas con autenticación

Curso de Angular 4

Clase 63 de 80

Clase 63 / 80

Recursos

Controla el acceso y la visibilidad de tu interfaz en Angular con total claridad. Aquí verás cómo usar AngularFireAuth, authState, ngIf y un guardia canActivate para mostrar u ocultar elementos según el estado de sesión, y cómo impedir el acceso por URL a vistas restringidas. Además, se explica el rol del JSON Web Token en local storage y el ajuste de reglas de lectura y escritura.

¿Cómo controlar la UI con ngIf y authState?

Para decidir qué ve un usuario según si está logueado, se aprovecha authState de AngularFireAuth. Este stream existe solo cuando hay sesión activa y expone un identificador único (UID).

Idea clave: authState indica si hay usuario autenticado.
Variable de estado: loggedIn = false para controlar la vista.
Visibilidad condicional: usar ngIf para mostrar u ocultar login y registro.

¿Qué hace la función isLogged?

Función pública: isLogged devuelve el stream de autenticación.
Origen de datos: usa el objeto de autorización y su authState.
Inicio temprano: se invoca desde el constructor para escuchar desde que abre la app.

// autorizacion.service.ts
public isLogged() {
  return this.angularFireAuth.authState;
}

¿Cómo suscribirte a authState y manejar errores?

Suscripción: llamar a isLogged().subscribe(...).
Éxito: si result y result.uid existen, loggedIn = true.
Alternativas: si no hay result o no hay UID, loggedIn = false.
Error: por seguridad, cualquier error implica loggedIn = false.

// app.component.ts
loggedIn = false;

constructor(private autorizacionService: AutorizacionService) {
  this.autorizacionService.isLogged().subscribe({
    next: (result) => {
      if (result && result.uid) {
        this.loggedIn = true;
      } else {
        this.loggedIn = false;
      }
    },
    error: () => {
      this.loggedIn = false;
    }
  });
}

¿Cómo ocultar login y registro con ngIf?

Ubicación: en app.component.html donde está la barra de navegación.
Regla visual: si está logueado, ocultar login y registro; si no, mostrarlos.

<!-- app.component.html -->
<ul *ngIf="!loggedIn">
  <!-- enlaces de login y registro -->
</ul>

Verificación rápida: al iniciar sin sesión se muestran login y registro; tras el login, se ocultan automáticamente.

¿Cómo configurar reglas de lectura y escritura?

A nivel de base de datos, se puede permitir lectura pública para maximizar vistas, dejando escritura solo con autorización.

Lectura abierta: regla de lectura en true.
Escritura restringida: requiere autenticación.
Efecto práctico: aunque no haya sesión, el listado se carga tras refresh; sin sesión, no se puede escribir.

¿Qué es un guardia canActivate y cómo protege rutas?

Aunque ocultes botones, alguien podría escribir la URL directa. Un guardia evita el acceso a rutas cuando no hay sesión, incluso si se conoce el path.

Comportamiento: si no hay sesión, no navega; con sesión, sí.
Ventaja: protección robusta a nivel de rutas.
Escenario: bloquea accesos alternos, no solo botones.

¿Cómo crear el servicio MyGuard?

Naturaleza: es un service con decorador @Injectable.
Dependencias: reutiliza la lógica de isLogged y la variable loggedIn.
Regla de acceso: canActivate retorna this.loggedIn.

// my-guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AutorizacionService } from './autorizacion.service';

@Injectable()
export class MyGuard implements CanActivate {
  private loggedIn = false;

  constructor(private autorizacionService: AutorizacionService) {
    this.autorizacionService.isLogged().subscribe({
      next: (r) => { this.loggedIn = !!(r && r.uid); },
      error: () => { this.loggedIn = false; }
    });
  }

  canActivate(): boolean {
    return this.loggedIn;
  }
}

¿Cómo activarlo en app.module.ts y rutas?

Registro del servicio: agregar MyGuard en providers de app.module.ts.
Protección de rutas: añadir canActivate: [MyGuard] en las rutas restringidas, por ejemplo la de crear.

// app.module.ts (fragmento)
import { MyGuard } from './my-guard.service';

@NgModule({
  providers: [MyGuard]
})
export class AppModule {}

// app-routing (fragmento)
{
  path: 'crear',
  component: CrearComponent,
  canActivate: [MyGuard]
}

Prueba final: sin sesión, no permite navegar ni con la URL directa; con sesión, el acceso se concede normalmente.

Palabras clave y habilidades trabajadas: JSON Web Token en local storage, authState y stream de autenticación, control visual con ngIf, manejo de errores en subscribe, reglas de lectura y escritura en base de datos, uso de guardia canActivate, configuración en providers y rutas, y navegación protegida por URL y path.

¿Te gustaría que profundicemos en el flujo de logout o en estrategias de redirección tras el login? Comparte tus dudas y casos de uso en los comentarios.

Alejandro Martín Fernández

Hace 8 años

Hola a todos. Encontré la solución al problema del las peticiones HTTP con token. Muchos por aquí ya dieron su solución. Pero a mí no me sirvió ninguna de ellas. Os dejo mí código por aquí:

En el archivo lugares.service.ts:

public getLugares(idToken) {
    return this.http.get(`${this.API_ENDPOINT}/.json?auth=${idToken}`)
      .pipe(map((response: any) => response.lugares));
  }

En el archivo lugares.component.ts:

constructor(private lugaresService: LugaresService, private fireAuth: AngularFireAuth) {
    this.fireAuth.auth.onAuthStateChanged(user => {
      if (user) {
        this.fireAuth.auth.currentUser.getIdToken(true)
          .then((idToken) => {
            this.lugaresService.getLugares(idToken)
              .subscribe(lugares => {
                this.lugares = Object.keys(lugares).map(key => {
                  lugares[key].id = key;
                  return lugares[key];
                });
                this.state = 'final';
              }, error => {
                this.errorMessage = `Tenemos algo de dificultados, disculpe las molestias. Error: ${error.status}`;
              });
          });
      }
    });
  }

this.fireAuth.auth.onAuthStateChanged Es un escuchador de eventos que saltará cuando firebase haya devuelto el usuario logeado. Con eso podrás hacer F5 y no dará error.

this.fireAuth.auth.currentUser.getIdToken Con esta línea pides el token de autenticación del usuario logeado.

this.lugaresService.getLugares Y por último llamamos a nuestro servicio de lugares pasándole el token como parámetro.

Espero que os sirva, un saludo!

Jesus David Mendez Coronell

Hace 8 años

una pregunta, como declaras la variable idToken en el servicio?

veronica oviedo

Hace 7 años

no me funciono

Comentarios (17)17 comentarios

Andres Felipe Valencia Benitez

Hace 9 años

Duilio Luque

LUIS CAIZA

Diego Forero

Team Platzi

Maximiliano Torre

Joshua Michael Rodriguez

Rodolfo Sáenz

Juan Roa

Diego Vallejo

Carlos Uriel de Jesus Sánchez González

Usuario anónimo

User

Darwel Duran

Alexis Antonio Moraga Gallardo

Yuri Marcela Quejada Santos

Nelson Oswaldo Gonzalez Santiago

Juan Jose Vega

Wilmer Maldonado

Efrain Rivera

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina