Eu tenho um AuthGuard (usado para roteamento) que implementa CanActivate .

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

Meu problema é que o CanActivate-result depende de um http-get-result - o LoginService retorna um Observable .

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

Como posso uni-los - fazer CanActivate depender de um estado de back-end?

# # # # # #

EDIT: Por favor, note que esta questão é de 2016 - um estágio muito inicial do angular / roteador foi usado.

# # # # # #

Você deve atualizar "@ angular / router" para o mais recente. por exemplo, "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);
        });
    }   
}

Se você tiver alguma dúvida, pergunte-me!

Atualizando a resposta de Kery Hu para Angular 5+ e RxJS 5.5 onde ocatch operador está obsoleto. Agora você deve usar o operador catchError em conjunto com os operadores 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 () aceita Observable<boolean>como valor retornado. O guarda vai esperar que o Observável resolva e olhar para o valor. Se for 'verdadeiro', ele passará na verificação, senão (quaisquer outros dados ou erro lançado) rejeitará a rota.

Você pode usar o .mapoperador para transformar o Observable<Response>para Observable<boolean>like assim:

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

Eu fiz desta forma:

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

Como você pode ver, estou enviando uma função de fallback para userService.auth, o que fazer se a chamada http falhar.

E em userService eu tenho:

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

Isso pode te ajudar

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 funciona com Observable, mas falha quando 2 chamadas são feitas como CanActivate: [Guard1, Guard2].
Aqui, se você retornar um Observable of false de Guard1, ele também verificará em Guard2 e permitirá o acesso à rota se Guard2 retornar true. Para evitar isso, Guard1 deve retornar um booleano em vez de Observable de boolean.

em canActivate (), você pode retornar uma propriedade booleana local (o padrão é false no seu caso).

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

E então, no resultado do LoginService, você pode modificar o valor dessa propriedade.

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