Skip to main content
Recompensa finalizada con 100 de reputación otorgada por Alberto Siurob
se añadieron 713 caracteres en el cuerpo
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57

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.

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.

added method by op request
Origen Enlace
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(() => {
               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.

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.

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.

added angular feature link
Origen Enlace
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.17.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.

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.

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.

updated example based on OP comment
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57
Loading
updated example based on OP comment
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57
Loading
fixed indentation
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57
Loading
se añadieron 45 caracteres en el cuerpo
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57
Loading
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57
Loading