AuthGuardは、私がここにガイドを読んだユーザー

Question

をチェックする前に終了するの認証を待ちません。https://angular.io/docs/ts/latest/guide/router.html

はかなり簡単だが、しかし、私は認証ガード内angularfire2の認証を使用するかどうかはわかりません（canActivate ）。私が試したことはある：

のAuthService

import { Injectable } from '@angular/core'; 
import { AngularFire } from 'angularfire2'; 

@Injectable() 
export class AuthService { 

    private user: any; 

    constructor(private af: AngularFire) { 
    this.af.auth.subscribe(user => { 
     this.user = user; 
    }) 
    } 

    get authenticated(): boolean { 
    return this.user ? true : false; 
    } 

} 

AuthGuard

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router, private authService: AuthService) { } 

    canActivate(): Observable<boolean> | boolean { 
    if (this.authService.authenticated) 
     return true; 

    this.router.navigate(['/login']); 
    return false; 
    } 

} 

私もプロバイダをブートストラップするのAuthServiceを追加しました。

しかし、私の主な問題は、AuthGuardを持っているページをリフレッシュする（または最初に読み込む）ときに、AuthGuardが認証応答を待たずに常に私をログインページにリダイレクトすることです。認証が完了するのを待つ方法があります（失敗した場合でも）。、次にが認証されているかどうかを確認しますか？

Answer 1

問題はあなたのコードです。 AuthGuardでは、ユーザープロパティがまだ設定されていないため、おそらくfalseを返すauthenticated（）メソッドの結果をチェックします。これを試してみてください：

のAuthService：

import { Injectable } from '@angular/core'; 
import { AngularFire } from 'angularfire2';'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class AuthService { 

    private user: any; 

    constructor(private af: AngularFire) { } 
    setUser(user) { this.user = user; } 
    getAuthenticated(): Observable<any> { return this.af.auth; } 
} 

AuthGuard：

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router, private authService: AuthService) { } 

    canActivate(): Observable<boolean> | boolean { 
    // here check if this is first time call. If not return 
    // simple boolean based on user object from authService 
    // otherwise: 

    return this.authService.getAuthenticated.map(user => { 
      this.authService.setUser(user); 
      return user ? true : false; 
    }) 

    } 
} 

Answer 2

それはルータの一部のバージョンでは異なる場合がありますが、私ははを完了すること、観察を返すために必要な。

import { CanActivate, Router } from '@angular/router' 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private af: AngularFire, private router: Router) { } 

    canActivate(): Observable<boolean> { 
    return this.af.auth.map(user => { 
     if (user != null) 
     return true 
     this.router.navigate(['/login']) 
    }) 
    .take(1) // To make the observable complete after the first emission 
    } 
}