Показать компоненты, если есть аутентифицированный пользователь

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>

Так что, если есть аутентифицированный пользователь, компонент входа не будет отображаться.У меня есть authenticate.service.ts, который использует 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

Вы можете сделать это: -

В signin.component.ts

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

In 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'])]

Answer 3

Подписаться на свой authState

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

Там вы можете настроить своего пользователя.