Question

在angular 7应用程序中，我正在学习根据angularfire2文档here实施身份验证。我这样设置了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

的authenticate.service.ts

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

for file in user-*.tar.xz ; do
    # remove prefix and suffix
    date=${file#user-}
    date=${date%.tar.xz}
    # replace dots by /
    date=${date//./\/}

    touch -m --date "${date}" "${file}"
done

在AuthService.ts

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

因此，基本上，您必须使用router.navigate [（['Your_Route']）]

将其重定向到要重定向的位置。

如果有经过验证的用户，则显示组件

3 个答案: