Skip to main content
3 de 8
fixed indentation
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 no el subscribe que necesita el guard para registrar la emisión de valores.

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(
            map(data => {
                if (data.auth) {
                    return true;
                }
                return this._router.createUrlTree(['/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