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.