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

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

Mi problema es que el resultado de CanActivate depende de un http-get-result; el 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 backend?

# # # # # #

EDITAR: Tenga en cuenta que esta pregunta es de 2016: se ha utilizado una etapa muy temprana de angular / enrutador.

# # # # # #

Debe actualizar "@ angular / enrutador" 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 duda, pregúntame！

Actualización de la respuesta de Kery Hu para Angular 5 y RxJS 5.5 donde el catchoperador está en desuso. Ahora debería usar el operador catchError junto con los operadores de canalización y permitible .

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 () acepta Observable<boolean>como valor devuelto. El guardia esperará a que el Observable se resuelva y verá el valor. Si es 'verdadero', pasará la verificación, de lo contrario (cualquier otro dato o error arrojado) rechazará la ruta.

Se puede utilizar el .mapoperador para transformar el Observable<Response>de Observable<boolean>este modo:

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

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

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

CanActivate funciona con Observable pero falla cuando se realizan 2 llamadas como CanActivate: [Guard1, Guard2].
Aquí, si devuelve un Observable de falso de Guard1, también comprobará 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 boolean.

en canActivate (), puede devolver una propiedad booleana local (por defecto es 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);