如果有經過身份驗證的用戶，則顯示組件

Question

在angular 7應用程序中，我將在此處學習根據angularfire2文檔實施身份驗證。 我像這樣設置了我的app.component.html文件

<app-login *ngIf="!authService.user"></app-login>

<div class="container-fluid" *ngIf="(authService.user | async) as user">
  <div class="row">
    <!-- navigation sidebar -->
    <div class="col-2 pt-5" id="sideNav">
      <app-navbar></app-navbar>
    </div>

    <!-- main content area -->
    <main class="col-10 offset-2">
      <router-outlet></router-outlet>
    </main>
  </div>
</div>

因此，如果有經過身份驗證的用戶，則不會呈現登錄組件。 我有一個使用AngularFireAuth

import { Injectable } from "@angular/core";
import { AngularFireAuth } from "@angular/fire/auth";
import { auth } from "firebase/app";

@Injectable({
  providedIn: "root"
})
export class AuthenticateService {
  constructor(private afAuth: AngularFireAuth) {}

  signinUser(email: string, password: string) {
    this.afAuth.auth.signInWithEmailAndPassword(email, password);
    console.log("logged in");
  }
}

我的login.component.ts導入身份驗證服務，並在用戶提供電子郵件和密碼時嘗試登錄用戶

import { NgForm } from "@angular/forms";
import { Component, OnInit } from "@angular/core";
import { AuthenticateService } from "../services/authenticate.service";
import { Router } from "@angular/router";

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

  constructor(private authService: AuthenticateService) {}

  ngOnInit() {}

  tryLogin(loginForm: NgForm) {
    const email = loginForm.value.email;
    const password = loginForm.value.password;

    console.log(email, password);

    this.authService.signinUser(email, password);
  }
}

我的登錄組件按預期方式呈現，並且當我嘗試登錄但我的視圖沒有按預期方式更改時，我看到console.log消息-即呈現包含導航和主要內容區域的div。

我如何實現我的目標，我現在正在做某些事情嗎？

Answer 1

我相信signInWithEmailAndPassword應該是異步的，因此您需要等待它解決：

this.afAuth.auth.signInWithEmailAndPassword(email, password)
  .then(response => console.log(response));

我不確定響應的確切類型是什么，但是您應該將其保存在身份驗證服務中：

export class AuthenticateService {
  public user: BehaviorSubject<any> = new BehaviorSubject(null); // Add type accordingly

  constructor(private afAuth: AngularFireAuth) {}

  signinUser(email: string, password: string) {
    this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then(response => { console.log('Logged in!'; this.user.next(response); });
  }
}

將您的authService添加到AppComponent：

constructor(private myAuthService: AuthenticateService ) {}

並在app.component.html查找登錄用戶，如下所示：

<app-login *ngIf="!(myAuthService.user | async)"></app-login>

<div class="container-fluid" *ngIf="(myAuthService.user | async) as user">
  <div class="row">
    <!-- navigation sidebar -->
    <div class="col-2 pt-5" id="sideNav">
      <app-navbar></app-navbar>
    </div>

    <!-- main content area -->
    <main class="col-10 offset-2">
      <router-outlet></router-outlet>
    </main>
  </div>
</div>

Answer 2

訂閱您的authState

this.afAuth.authState.subscribe(user => {
   // your code
});

您可以在那里設置用戶。

Answer 3

你可以這樣做 ：-

在signin.component.ts中

 onSignIn(form: NgForm){
            const email = form.value.email;
            const password = form.value.password;
            this.authService.signInUser(email, password);
        }

在AuthService.ts中

signInUser(email: string, password: string) {
        firebase.auth().signInWithEmailAndPassword(email, password)
            .then(
                response => {
                   //check if response is correct here
                    this.router.navigate(['your_component_route']);
                    firebase.auth().currentUser.getIdToken()
                        .then(
                            (token: string) => this.token = token
                        )
                }
            ).catch(
                error => console.log(error)
            )
    }

因此，基本上，您必須使用router.navigate [（['Your_Route']）]將其重定向到要重定向的位置。