Logout en Angular con Firebase

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:005:28

Logout en Angular con Firebase

Curso de Angular 4

Clase 65 de 80

Clase 65 / 80

Recursos

Implementa un logout fiable y redirecciones automáticas en Angular con Firebase. Aquí verás cómo usar Router.navigate, condicionales ngIf y AngularFireAuth.signOut para mejorar la experiencia del usuario y mantener una interfaz coherente tras login, registro y cierre de sesión.

¿Qué problema resolvemos con logout y redirecciones en Angular?

Al autenticarse con éxito, el usuario seguía en la misma pantalla. Lo correcto es redirigir a una ruta como “lugares” para confirmar el flujo. Además, dejar de borrar manualmente el registro en local storage y delegarlo a AngularFireAuth con un método de logout.

Redirigir tras login y registro mejora la usabilidad.
Centralizar el cierre de sesión en el servicio de autorización simplifica el estado.
Mostrar/ocultar elementos con ngIf mantiene una interfaz coherente.

¿Cómo implementar redirecciones tras login y registro?

Tras la autenticación, se inyecta Router en el servicio y se llama a navigate para enviar al usuario a “lugares”. Así se aplica la protección de rutas y una transición fluida tras login o registro.

¿Dónde inyectar router y qué ruta usar?

Inyecta Router como propiedad privada en el servicio de autorización.
Usa la ruta “lugares” para el destino post-autenticación.

// autorizacion.service.ts
import { Router } from '@angular/router';

private router: Router;

// tras login o registro exitoso
this.router.navigate(['lugares']);

¿Cómo verificar que funciona?

Realiza login y confirma que ves “logueado con éxito” y la redirección inmediata a “lugares”.
Repite el flujo en registro para validar el mismo comportamiento.

¿Cómo crear un botón de logout con AngularFireAuth?

Se agrega un método público de logout en el servicio para llamar a AngularFireAuth.signOut. Esto notifica a Firebase y borra el estado del usuario en local storage. Luego, desde el template principal se lanza la acción con un botón y se redirige a “lugares”.

¿Qué hace AngularFireAuth.signOut?

Cierra la sesión en Firebase de forma segura.
Limpia el rastro de autenticación en local storage.
Permite encadenar acciones: alerta y redirección.

// autorizacion.service.ts
public logout() {
  return this.angularFireAuth.signOut().then(() => {
    alert('sesión cerrada');
    this.router.navigate(['lugares']);
  });
}

¿Cómo conectar el botón con el servicio?

En el template principal, agrega un enlace con (click) a un método del componente.
En el componente, delega en el servicio de autorización.

<!-- app.component.html -->
<ul class="nav-right">
  <li (click)="logout()">Logout</li>
</ul>

// app.component.ts
logout() {
  this.autorizacionService.logout();
}

¿Cómo mostrar u ocultar login, registro y logout?

Usa ngIf para controlar la visibilidad según si el usuario está logueado.
Muestra logout solo cuando hay sesión activa y oculta login/registro en ese caso.
Retira la negación en el ngIf del botón de logout para que aparezca solo cuando hay usuario autenticado.

¿Qué reto aplicar con Firebase y datos del usuario?

Como extensión, investiga cómo obtener los datos del usuario actual desde Firebase y muestra el correo junto al botón de logout cuando haya sesión activa.