Angular 2 - Routing - CanActivate work with Observable

Question

I have an AuthGuard (used for routing) that implements CanActivate.

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

My problem is, that the CanActivate-result depends on a http-get-result - the LoginService returns an Observable.

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

How can i bring those together - make CanActivate depend on a backend state?

# # # # # #

EDIT: Please note, that this question is from 2016 - a very early stage of angular/router has been used.

# # # # # #

Answer 1

You should upgrade "@angular/router" to the latest . e.g."3.0.0-alpha.8"

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

If you have any questions, ask me！

Answer 2

Updating Kery Hu's answer for Angular 5+ and RxJS 5.5 where the catch operator is deprecated. You should now use the catchError operator in conjunction with pipe and lettable operators.

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