Angular 2 – Angularfire 2身份验证状态

我正在尝试使用Angularfire2模块在angular 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>

当我在登录时查看我的控制台时,我看到以下结果.

{  
  the user: id:qqsrQHB0SyeIQTbri6sYEyTTE9r2
  isAuthenticated: false
}

所以我想登录一定要成功吧？但是当我检查验证是否为真时似乎失败了.只有在浏览器中进行硬刷新时,HomeComponent中的* ngIf =“！isAuth()”才起作用.

经过硬刷新后,我仍然在控制台中看到：

{  
  the user: id:qqsrQHB0SyeIQTbri6sYEyTTE9r2
  isAuthenticated: false
}