13

Estoy haciendo un guard en Angular 7 para verificar si está loggeado o no un usuario. Tanto el back como la petición funciona correctamente, sin embargo no puedo controlarlo dentro del subscribe. Este es el código que desarrollé

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { LoginService } from '../login.service';
import { Observable } from 'rxjs';
import { map } 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 {

    this._login.isLogged()
    .subscribe(
      // Si la respuesta es un código HTTP 204, entonces está autorizado
      () => true,

      // Si la respuesta es un código HTTP 401 entonces NO está autorizado
      () => {
        this._session.deleteData();
        this._router.navigate(['/login']);
        return false;
      });
  }
}

El problema es que el return del .subscribe no regresa el true o false al canActivate(): Observable<boolean> | boolean no sé como hacer para regresar ese Booleano

Me aparece este error

A function whose declared type is neither 'void' nor 'any' must return a value.

intenté hasta asignar el valor del subscribe a una variable para hacer return al final de canActivate() sin embargo es una función asíncrona por lo que termina de ejecutar el código y no espera la respuesta, reitero, todo funciona excelente tanto las respuestas del backend, como la función isLogged() la cual retorna el Observable al que me estoy suscribiendo en el guard.

Que puedo hacer?

También intenté esta función

return this._login.isLogged().pipe( map( (data: any) => {
  if( data.auth ) {
    return true;
  } else {
    this._session.deleteData();
    this._router.navigate(['/login']);
    return false;
  }
})
)

Y ahora ya funciona únicamente si hay un HTTP 200, no puedo controlar el código 401

5
  • ¿Qué cosa contiene data.auth?
    – gugadev
    Commented el 26 jun. 2019 a las 14:41
  • un true, tuve que modificar el backend. Estoy usando nodejs, y ya un middleware que valida si esta autorizado, el segundo ejemplo fue un error. No debería intentar implementarlo así Commented el 26 jun. 2019 a las 20:11
  • La respuesta del server con código 200 o 204 retorna algo en el body?
    – devconcept
    Commented el 2 jul. 2019 a las 12:52
  • No retorna nada, por eso no lo evalúo en el subscribe, es sencillo, si es 204, esta aútorizado, si hay error, no lo está. Commented el 2 jul. 2019 a las 14:27
  • @AlbertoSiurob Ya actualicé el ejemplo. Tu pregunta era algo confusa en ese sentido
    – devconcept
    Commented el 2 jul. 2019 a las 16:24

5 respuestas 5

8
+100

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(() => {
               this._session.deleteData();
               return 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.

Aquí dejo una explicación mas detallada de los operadores

map(() => true)

equivale a

map(result => {
    return true;
})

Cualquiera que sea el resultado si el status code del http está en el rango de los 200 el guard recibirá un valor true y procederá la navegación a la ruta solicitada

catchError(() => {
    this._session.deleteData();
    return of(this._router.createUrlTree(['/login']))
})

Si el código de estado del resultado es >=400 llamas al método deleteData y retornas un observable usando of que producirá un valor estático y luego completará. Este valor estático es el UrlTree que espera el guard para saber a donde debe dirigirse.

4
  • Es una respuesta muy interesante y estructurada. Me puedes decir en que casos se utiliza en of() Commented el 3 jul. 2019 a las 1:28
  • Necesito ejecutar this._session.deleteData(); en el catchError() donde pongo ese pedazo de código? Commented el 3 jul. 2019 a las 2:25
  • @AlbertoSiurob Actualizé la respuesta para incluir la llamada a deleteData(). El problema con el of en este caso es que el manejo de errores se puede hacer como parte del subscribe como lo tienes en tu pregunta y que no puedes usar por las razones antes expuestas y con el catchError que hace la misma función pero requiere obligatoriamente que se devuelva un observable al cual subscribirse. El of es un operador que te genera un nuevo observable que emite los valores que le pases y luego completa, en este caso el valor generado es el UrlTree que necesita el guard.
    – devconcept
    Commented el 3 jul. 2019 a las 13:16
  • @AlbertoSiurob Para aprender más sobre RXjs puedes ir aquí learnrxjs.io
    – devconcept
    Commented el 3 jul. 2019 a las 21:10
4

Puedes usar el operador map para retornar, por ejemplo

export class DataComponent{
  someMethod() {
    return this.http.get(path).map(res => {
      return res.json();
    });
  }
} 
1
  • 1
    Creo que ese código funcionaría en Angular 4 o 2, desde Angular 5 la la clase HttpClient se encarga de desserializar los JSON automáticamente Commented el 2 jul. 2019 a las 11:46
2

Añadiendo el return y usando pipe avanzaste en la dirección correcta, pero te faltó gestionar los errores, parece que eliminaste esa parte del código:

canActivate(): Observable<boolean> | boolean {

  return this._login.isLogged().pipe(
    map((data: any) => {
      if( data.auth ) {
        return true;
      } else {
        this._session.deleteData();
        this._router.navigate(['/login']);
        return false;
      }
    }),
    catchError(() => {
      this._session.deleteData();
      this._router.navigate(['/login']);
      return false;
    })
  );
}
1
  • 1
    No lo eliminé, simplemente no sabía que el `pipe()``podía hacer eso Commented el 3 jul. 2019 a las 1:30
1

Puedes tratar de hacer lo siguiente

Te suscribes al servicio y capturas el resultado en una variable

  this.servicio.metodoServicio().subscribe(
        result => {
              // puedes validar que resultado tiene result , este variable guarda lo que llegue del servidor 

En tu caso seria asi

this._login.isLogged().subscribe(
      // Si la respuesta es un código HTTP 204, entonces está autorizado
      result => {
           // debes validar la estructura de datos que llega en el result
           if(result.code) {
            // aqui returnas el true
           } else {
               this._session.deleteData();
               this._router.navigate(['/login']);
               return false;
           }
      });
0

El tema es que el subscribe no retorna lo que está como su parámetro, sino que el subscribe retorna un objeto Subscription.

Podrías retornar solamente this._login.isLogged() y suscribirte en la parte del código que invoca a canActivate().

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.