Protección de Rutas

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!

Uso Angular 7 y aun así el código del video funciona bien.

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

@Injectable({
  providedIn: 'root'
})
export class MyGuardService implements CanActivate {

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

  canActivate() {
    return this.loggedIn;
  }
}

autorizacionService.ts

  public getDisplayName() {
      return this.angularFireAuth.auth.currentUser.displayName;
  }

app.component.ts

export class AppComponent {
  loggedIn = false;
  displayName = '';
  constructor(private autorizacionService: AutorizacionService) {
    this.autorizacionService.isLogged().subscribe (
      result => {
        if ( result && result.uid) {
          this.loggedIn = true;
          this.getDisplayName();
        } else {
          this.loggedIn = false;
        }
    }, error => {
      this.loggedIn = false;
    });
  }

  logout() {
    this.autorizacionService.logout();
  }

  getDisplayName() {
    this.displayName = this.autorizacionService.getDisplayName();
  }
}

app.component.html

        <ul class="navbar-nav my-2 my-sm-0" *ngIf="loggedIn">
            <li>Hola {{ displayName }}</li>
            <li><a (click)="logout()">Logout</a></li>
        </ul>

Hola profe, una pregunta, que es lo que hace el método subscribe?

Protegeré mis rutas de una manera confiable. Muy buena clase.

¿Qué pasa si tengo un usuario en firebase de email con identificador ‘[email protected]’ y cuando uso el login con facebook el identificador también es ‘[email protected]’ ? Firebase me manda error.