Skip to main content
5 de 8
updated example based on OP comment
devconcept
  • 12.8k
  • 3
  • 42
  • 57

No debes usar subscribe dentro de un guard porque lo que este necesita es un Observable como tal y lo que te retorna llamar a esta función es un Subscription que es el que contiene el método unsubscribe y para que el guard internamente pueda registrar la emisión de valores lo que necesita es poder acceder el mismo al subscribe que viene incluido en la interfaz del Observable.

Puedes usar el operador map para transformar el valor que recibes al ejecutar tu función isLogged() y retornar uno de los valores que pueden procesar los guards. De manera ideal estos valores deberían ser true si está permitido el acceso o un UrlTree si no lo está. Por ejemplo:

import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { LoginService } from '../login.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { StorageService } from '../storage.service';

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

  constructor( private _login: LoginService,
               private _router: Router,
               private _session: StorageService) {}

  canActivate(): Observable<boolean> | boolean | Observable<UrlTree> | UrlTree {

    return this._login.isLogged()
        .pipe(
            // Si la petición es exitosa se puede proceder
            map(() => true),
            // Si la peticion tiene un error de estado >= 400 se dirige al login
            catchError(() => of(this._router.createUrlTree(['/login'])))
        );
    }
}

Los UrlTree estan soportados a partir de Angular >= 7.1, pueden ser creados fácilmente con la función createUrlTree y se usan como una mejor alternativa a tener que escribir navigate acompañado de return false. Por ejemplo estos códigos dentro de un guard son equivalentes:

this._router.navigate(['/login']);
return false;

a

return this._router.createUrlTree(['/login']);

Si usas una versión inferior a la 7.1 tendrás que usar la primera alternativa pero en ningún caso debes retornar solamente false sin navegar pues el usuario no se enterará que ha ocurrido un error.

devconcept
  • 12.8k
  • 3
  • 42
  • 57