Ich habe einen AuthGuard (für das Routing verwendet), der CanActivate implementiert .

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

Mein Problem ist, dass das CanActivate-Ergebnis von einem http-get-Ergebnis abhängt - der LoginService gibt ein Observable zurück .

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

Wie kann ich diese zusammenbringen - damit CanActivate von einem Backend-Status abhängt?

# # # # # #

EDIT: Bitte beachten Sie, dass diese Frage aus dem Jahr 2016 stammt - ein sehr frühes Stadium von Angular / Router wurde verwendet.

# # # # # #

Sie sollten "@ angle / router" auf den neuesten Stand bringen. zB "3.0.0-alpha.8"

Ändern Sie 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);
        });
    }   
}

Wenn Sie Fragen haben, fragen Sie mich！

Aktualisierung der Antwort von Kery Hu für Angular 5 und RxJS 5.5, bei denen der catchBediener veraltet ist. Sie sollten jetzt den Operator catchError in Verbindung mit Operatoren für Pipe und Vermietung verwenden .

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 () akzeptiert Observable<boolean>als zurückgegebenen Wert. Der Wachmann wartet, bis sich das Observable aufgelöst hat, und überprüft den Wert. Wenn 'true', besteht es die Prüfung, andernfalls (andere Daten oder ausgelöste Fehler) wird die Route abgelehnt.

Sie können die Verwendung .mapOperator der Transformation Observable<Response>zu Observable<boolean>etwa so:

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

Ich habe es so gemacht:

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

Wie Sie sehen, sende ich eine Fallback-Funktion an userService.auth, was zu tun ist, wenn der http-Aufruf fehlschlägt.

Und in userService habe ich:

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

Dies kann Ihnen helfen

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 funktioniert mit Observable, schlägt jedoch fehl, wenn zwei Aufrufe wie CanActivate getätigt werden: [Guard1, Guard2].
Wenn Sie hier ein Observable of false von Guard1 zurückgeben, wird auch Guard2 eingecheckt und der Zugriff auf die Route ermöglicht, wenn Guard2 true zurückgibt. Um dies zu vermeiden, sollte Guard1 einen Booleschen Wert anstelle von Observable of Boolean zurückgeben.

In canActivate () können Sie eine lokale boolesche Eigenschaft zurückgeben (in Ihrem Fall standardmäßig false).

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

Im Ergebnis des LoginService können Sie den Wert dieser Eigenschaft ändern.

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