Bir sahip AuthGuard uygular ki (yönlendirmek için kullanılır) CanActivate .

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

Benim sorunum, CanActivate-sonucunun bir http-get-sonucuna bağlı olması - LoginService bir Observable döndürüyor .

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

Bunları nasıl bir araya getirebilirim - CanActivate'i arka uç durumuna bağlı hale getirebilirim?

# # # # # #

DÜZENLEME: Lütfen bu sorunun 2016 yılına ait olduğunu unutmayın - açısal / yönlendiricinin çok erken bir aşaması kullanılmıştır.

# # # # # #

"@ Angular / router" ı en son sürüme yükseltmelisiniz. ör. "3.0.0-alpha.8"

AuthGuard.ts değiştir

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

Herhangi bir sorunuz varsa bana sorun！

Açısal 5 ve RxJS 5.5 için Kery Hu'nun cevabı Güncellenmesi operatör kullanımdan kaldırıldı. Şimdi catchError operatörünü boru ve izin verilebilir operatörlerle birlikte kullanmalısınız .catch

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 () kabul ederObservable<boolean> döndürülen değer olarak . Koruma, Gözlemlenebilir'in çözülmesini ve değere bakmasını bekleyecektir. "Doğru" ise, kontrolü geçecektir, aksi takdirde (herhangi bir başka veri veya atılan hata) yolu reddedecektir.

Sen kullanabilirsiniz .mapdönüştürmeye operatörü Observable<Response>için Observable<boolean>şöyle:

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

Bunu şu şekilde yaptım:

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

Gördüğünüz gibi userService.auth'a http araması başarısız olursa ne yapacağımı bir geri dönüş işlevi gönderiyorum.

Ve userService'te:

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

Bu sana yardımcı olabilir

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, Observable ile çalışır, ancak CanActivate: [Guard1, Guard2] gibi 2 çağrı yapıldığında başarısız olur.
Burada, Guard1'den bir Observable of false döndürürseniz, Guard2'de de kontrol edecek ve Guard2 true dönerse rotaya erişime izin verecektir. Bundan kaçınmak için, Guard1, Observable yerine Boolean yerine bir boole döndürmelidir.

canActivate () 'de yerel bir boole özelliği döndürebilirsiniz (sizin durumunuzda varsayılan olarak false).

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

Ve sonra LoginService sonucunda, o özelliğin değerini değiştirebilirsiniz.

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