Ho un AuthGuard (utilizzato per il routing) che implementa CanActivate .

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

Il mio problema è che il risultato di CanActivate dipende da un risultato http-get - LoginService restituisce un Observable .

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

Come posso riunirli - fare in modo che CanActivate dipenda da uno stato di backend?

# # # # # #

EDIT: Si prega di notare che questa domanda è del 2016: è stata utilizzata una fase molto iniziale di angolare / router.

# # # # # #

Dovresti aggiornare "@ angular / router" all'ultimo. ad es. "3.0.0-alpha.8"

modificare 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);
        });
    }   
}

Se hai domande, chiedimi！

Aggiornamento della risposta di Kery Hu per Angular 5 e RxJS 5.5 in cui l' catchoperatore è deprecato. Ora dovresti usare l'operatore catchError insieme agli operatori pipe e 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);
      })
    );
  }   

}

canActivate () accetta Observable<boolean>come valore restituito. La guardia attenderà che l'Osservabile si risolva e guarderà il valore. Se 'true' passerà il controllo, altrimenti (qualsiasi altro dato o errore lanciato) rifiuterà la rotta.

Puoi usare l' .mapoperatore per trasformare il Observable<Response>in Observable<boolean>così:

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

L'ho fatto in questo modo:

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

Come puoi vedere, sto inviando una funzione di fallback a userService.auth cosa fare se la chiamata http non riesce.

E in userService ho:

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);
  });}

Questo potrebbe aiutarti

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

CanActivate funziona con Observable ma non riesce quando vengono effettuate 2 chiamate come CanActivate: [Guard1, Guard2].
Qui se restituisci un Observable di false da Guard1, anche questo controllerà Guard2 e consentirà l'accesso alla route se Guard2 restituisce true. Per evitare ciò, Guard1 dovrebbe restituire un booleano invece di Observable di boolean.

in canActivate (), puoi restituire una proprietà booleana locale (l'impostazione predefinita è false nel tuo caso).

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

Quindi, nel risultato del LoginService, puoi modificare il valore di quella proprietà.

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