角度2 - 私は観測、約束や状態の狂気に迷ってしまいましたAngularfire 2認証状態

Question

。私はこれを理解する助けが必要です。

私はAngularfire2モジュールと私の角度2のアプリケーションで登録/サインイン/サインアップ機能を実装しようとしています。私はログイン機能から始めています。私は基礎が働いている。私はログインして新しいページにリダイレクトできます。ここまでは順調ですね。私のテンプレートでは、ユーザーがログインしているかどうかをチェックしています。そしてここで問題を始める。私は現在のユーザーがログインしているかどうかを確認するのに苦労しています。

Login.components.ts

import { Component, OnInit } from '@angular/core'; 
import {Validators, FormGroup, FormBuilder } from '@angular/forms'; 
import { AuthService } from '../auth.service'; 
import {Router} from '@angular/router'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 

    form: FormGroup; 
    error = false; 
    errorMessage = ''; 

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

    ngOnInit() { 
    this.form = this.fb.group({ 
     email: ['', Validators.required], 
     password: ['', Validators.required] 
    }); 
    } 

    onLogin() { 
    this.authService.loginUser(this.form.value.email, this.form.value.password) 
    .subscribe(
    () => this.router.navigate(['/']) 
    ) 
    } 

} 

Auth.service.ts

import { Injectable } from '@angular/core'; 
import { Router } from '@angular/router'; 
import {FirebaseAuth} from 'angularfire2/index'; 
import {Observable, Subject} from 'rxjs/Rx'; 

@Injectable() 
export class AuthService { 

    constructor(private auth: FirebaseAuth, private router:Router) { } 

    loginUser(email, password):Observable<any> { 
    return this.fromFirebaseAuthPromise(this.auth.login({email,password})); 
    } 

    logout() { 
    this.auth.logout(); 
    this.router.navigate(['/']); 
    } 

    fromFirebaseAuthPromise(promise):Observable<any> { 
    const subject = new Subject<any>(); 
    promise 
     .then(res => { 
     subject.next(res); 
     subject.complete(); 
     }, 
     err => { 
     subject.error(err); 
     subject.complete(); 
     }); 
    return subject.asObservable(); 
    } 


    isAuthenticated(): Observable<any> { 
     const state = new Subject<any>(); 

     this.auth.subscribe((user) => { 
     if (user) { 
      var uid = user.uid; 
      console.log('the user id:' + uid) 
      state.next(true) 
     } else { 
      console.log("no user") 
      state.next(false) 
     } 
     }) 

    return state.asObservable(); 
    } 
} 

home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AuthService } from './auth/auth.service'; 
import { AuthInfo } from './auth/auth-info'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    isAuthenticated = false; 

    constructor(private authService:AuthService) { 
    this.authService.isAuthenticated().subscribe(
     authStatus => this.isAuthenticated = authStatus 
    ); 
    console.log('isAuthenticated:' + this.isAuthenticated); 
    } 

    isAuth() { 
     return this.isAuthenticated; 
    } 

    onLogout() { 
    this.authService.logout(); 
    } 

    ngOnInit() { 

    } 
} 

home.component.html

<h2> 
    Please login or register to use the app 
</h2> 

<a [routerLink]="['/login']" *ngIf="!isAuth()">Login here</a> 
<a [routerLink]="['/register']" *ngIf="!isAuth()">Register here</a> 

<a *ngIf="isAuth()" (click)="onLogout()" style="cursor: pointer;">Logout</a> 

私は次の結果を参照してくださいにloginningとき、私は私のコンソールを見てください。

{ 
    the user: id:qqsrQHB0SyeIQTbri6sYEyTTE9r2 
    isAuthenticated: false 
} 

だから私はログインに成功する必要がありますか？しかし、認証が正しいかどうかを確認するときに失敗するようです。 HomeComponentの* ngIf = "！isAuth（）"は機能しません。ブラウザでハードリフレッシュを行う場合のみです。

ハードリフレッシュした後、私はまだコンソールに表示：あなたはそんなに複雑いる

{ 
    the user: id:qqsrQHB0SyeIQTbri6sYEyTTE9r2 
    isAuthenticated: false 
} 

Answer 1

、これはどのようにあなたのコードは次のようになります。

Auth.service

import { Injectable } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { FirebaseAuth } from 'angularfire2/index'; 
import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class AuthService { 

    constructor(private auth: FirebaseAuth, private router:Router) { } 

    loginUser(email, password) { 
    return this.auth.login({email,password}) //angularfire returns a promise 
    } 

    loginUserObservable(email,password){ //but if still want to use an observable 
    return Observable.fromPromise(<Promise<any>> this.auth.login({email,password})) // we need to cast the Promise because for some reason Angularfire returns firebase.Promise 
    } 

    logout() { 
    this.auth.logout(); 
    this.router.navigate(['/']); 
    }  

    isAuthenticated(): Observable<any> { 
     return this.auth; //auth is already an observable 
    } 
} 

home.component.ts：

import { Component, OnDestroy, OnInit } from '@angular/core'; 
import { AuthService } from './auth/auth.service'; 
import { AuthInfo } from './auth/auth-info'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit, OnDestroy { 
    private sub: Subscription; 

    constructor(private authService:AuthService) { } 

    ngOnInit() { 
    this.sub = this.authService.isAuthenticated().subscribe(authResp => 
     console.log('isAuthenticated: ', authResp); 
    ); 
    } 

    ngOnDestroy() { 
    this.sub.unsubscribe(); 
    } 

    isAuth() { 
     return this.authService.isAuthenticated(); 
    } 

    onLogout() { 
    this.authService.logout(); 
    } 
} 

home.component.html

<h2> 
    Please login or register to use the app 
</h2> 

<a [routerLink]="['/login']" *ngIf="!(isAuth() | async)">Login here</a> 
<a [routerLink]="['/register']" *ngIf="!(authService.isAuthenticated() | async)">Register here</a> 
<!--you can either use !(isAuth() | async) or !(authService.isAuthenticated() | async) it's up to your religion --> 

<a *ngIf="isAuth() | async" (click)="onLogout()" style="cursor: pointer;">Logout</a> 

私はあなたがこのsimple guide

を読むことをお勧めし