navigationend - router events subscribe angular 4

Angular 2-Enrutamiento-Puede activar el trabajo con Observable

Question

Tengo un AuthGuard (usado para enrutamiento) que implementa CanActivate .

canActivate() {
    return this.loginService.isLoggedIn();
}

Mi problema es que CanActivate-result depende de un http-get-result: LoginService devuelve un Observable .

isLoggedIn():Observable<boolean> {
    return this.http.get(ApiResources.LOGON).map(response => response.ok);
}

¿Cómo puedo unirlos? ¿Hacer que CanActivate dependa de un estado de fondo?

Answer 1

¿Cómo funciona para usted sin llamar a suscribirse? para mí, cuando llamo a esto a través de mi API .net, nada vuelve Tengo que llamar a suscribirme en mi servicio de protección de autenticación de esta manera, solo que realiza una llamada API real. Pero dado que la suscripción es asíncrona, mi canActivate guard no funciona y el usuario puede ingresar a la página.

AuthGauard service:

canActivate() { this.loginService.isLoggedIn()
      .subscribe(response => {
          if (!response) return false;})
return true;
}

loginService:
    isLoggedIn():Observable<boolean> {
        return this.http.get(ApiResources.LOGON).pipe(map(response => response.ok));
    }

Answer 2

Actualización de la respuesta de Kery Hu para Angular 5 y RxJS 5.5 donde el operador de catch está en desuso. Ahora debe usar el operador catchError junto con los operadores pipe y lettable .

import { Injectable } from ''@angular/core'';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from ''@angular/router'';
import { Observable } from ''rxjs/Observable'';
import { catchError, map} from ''rxjs/operators'';
import { of } from ''rxjs/observable/of'';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private loginService: LoginService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {
    return this.loginService.isLoggedIn().pipe(
      map(e => {
        if (e) {
          return true;
        } else {
          ...
        }
      }),
      catchError((err) => {
        this.router.navigate([''/login'']);
        return of(false);
      })
    );
  }   

}

Answer 3

CanActivate funciona con Observable pero falla cuando se realizan 2 llamadas como CanActivate: [Guard1, Guard2].
Aquí, si devuelve un Observable de falso desde Guard1, también se registrará en Guard2 y permitirá el acceso a la ruta si Guard2 devuelve verdadero. Para evitar eso, Guard1 debería devolver un booleano en lugar de Observable de booleano.

Answer 4

Debería actualizar "@ angular / router" a la última versión. por ejemplo, "3.0.0-alpha.8"

modificar AuthGuard.ts

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private loginService:LoginService, private router:Router) { }

    canActivate(next:ActivatedRouteSnapshot, state:RouterStateSnapshot) {
        return this.loginService.isLoggedIn().map(e => {
            if (e) {
                return true;
            }
        }).catch(() => {
            this.router.navigate([''/login'']);
            return Observable.of(false);
        });
    }   
}

Si tienes alguna pregunta, pregúntame！

Answer 5

Esto puede ayudarte

import { Injectable } from ''@angular/core'';
import { CanActivate, Router } from ''@angular/router'';
import { Select } from ''@ngxs/store'';
import { Observable } from ''rxjs'';
import { map, take } from ''rxjs/operators'';
import { AuthState } from ''src/app/shared/state'';

export const ROLE_SUPER = ''ROLE_SUPER'';

@Injectable()
export class AdminGuard implements CanActivate {

 @Select(AuthState.userRole)
  private userRoles$: Observable<string[]>;

  constructor(private router: Router) {}

 /**
   * @description Checks the user role and navigate based on it
   */

 canActivate(): Observable<boolean> {
    return this.userRoles$.pipe(
      take(1),
      map(userRole => {
        console.log(userRole);
        if (!userRole) {
          return false;
        }
        if (userRole.indexOf(ROLE_SUPER) > -1) {
          return true;
        } else {
          this.router.navigate([''/login'']);
        }
        return false;
      })
    );
  } // canActivate()
} // class

Answer 6

Lo he hecho de esta manera:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.userService.auth(() => this.router.navigate([''/user/sign-in'']));}

Como puede ver, estoy enviando una función alternativa a userService.auth qué hacer si falla la llamada http.

Y en userService tengo:

import ''rxjs/add/observable/of'';

auth(fallback): Observable<boolean> {
return this.http.get(environment.API_URL + ''/user/profile'', { withCredentials: true })
  .map(() => true).catch(() => {
    fallback();
    return Observable.of(false);
  });}

Answer 7

en canActivate (), puede devolver una propiedad booleana local (predeterminada en falso en su caso).

private _canActivate: boolean = false;
canActivate() {
  return this._canActivate;
}

Y luego, en el resultado de LoginService, puede modificar el valor de esa propiedad.

//...
this.loginService.login().subscribe(success => this._canActivate = true);

Answer 8

angular.io/docs/ts/latest/api/router/index/… acepta Observable<boolean> como valor devuelto. El guardia esperará a que el Observable se resuelva y mirará el valor. Si es ''verdadero'', pasará la verificación, de lo contrario (cualquier otro dato o error arrojado) rechazará la ruta.

Puede usar el operador .map para transformar el Observable<Response> en Observable<boolean> manera:

canActivate(){
    return this.http.login().map((res: Response)=>{
       if ( res.status === 200 ) return true;
       return false;
    });
}