web-dev-qa-db-ja.com

AuthGuardはユーザーの確認前に認証が完了するのを待ちません

ここでガイドを読みました： https://angular.io/docs/ts/latest/guide/router.html

かなり単純そうに見えますが、authguard（canActivate）内でangularfire2の認証を使用する方法がわかりません。私が試したのは：

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もbootstrapプロバイダーに追加しました。

この種の方法は正常に機能しますが、私の主な問題は、AuthGuardが含まれるページを更新（または最初にロード）すると、AuthGuardは常にログインページにリダイレクトされるためです。認証応答を待ちます。認証が完了するのを（それが失敗した場合でも）待機し、次にユーザーが認証されているかどうかを確認する方法はありますか？

angularangularfire
14
Andrew

問題はコードにあります。 AuthGuardでは、userプロパティがまだ設定されていないため、おそらくfalseを返すauthentication（）メソッドの結果を確認します。これを試して：

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

  } 
}
18
Baumi

ルーターのバージョンによっては異なる場合がありますが、completesというオブザーバブルを返す必要がありました。

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
  }
}
8
hayden