Angular 中的 Firebase 身份验证

Question

我正在使用来自 firebase 的这些 @angular/fire 官方软件包。 https://www.npmjs.com/package/@angular/fire

我已经通过使用 firebase 的身份验证完成了登录。它工作正常..但登录后我导航到路由模块..它有时会再次显示登录表单并返回到我的模块..防止显示的解决方案是什么在身份验证后导航延迟加载模块期间再次登录表单..任何人都可以提供解决方案，这将是一个帮助。!!这是我下面的代码

app.component.html

<ng-container *ngIf="afAuth.user | async as user; else showLogin">
    <div><app-header-component></app-header-component></div>
    <div><app-sidenav-component></app-sidenav-component></div>
    <mat-progress-spinner *ngIf="loading" class="spinner" mode="indeterminate"></mat-progress-spinner>
    <router-outlet></router-outlet>
</ng-container>
<ng-template #showLogin>
    <div class="login-main">
        <div class="form">
            <div class="logo"><img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg"
                    style="width: 120px; height: 40px;" /></div>
            <mat-card>
                <div class="title">
                    Sign in your Account
                </div>
                <form [formGroup]="login_form">
                    <div class="login-form">
                        <mat-form-field appearance="outline">
                            <mat-label>Email</mat-label>
                            <input matInput placeholder="Enter Your Email" type="email" name="email" formControlName="email" required>
                            <mat-error *ngIf="login_form.get('email').touched && this.login_form.get('email').hasError('required')">Email required.</mat-error>
                        </mat-form-field>
                        <mat-form-field appearance="outline">
                            <mat-label>Password</mat-label>
                            <input type="password" matInput placeholder="Enter Your password" name="password" formControlName="password"
                                required>
                            <mat-error *ngIf="login_form.get('email').touched && this.login_form.get('email').hasError('required')">Password Required.</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="login-btn">
                        <div class=""><button mat-raised-button color="primary" (click)="login()">Login</button></div>
                    </div>
                </form>
            </mat-card>
        </div>
    </div>
</ng-template>

app.component.ts

constructor( public afAuth : AngularFireAuth,
     private fb: FormBuilder) {

    this.login_form = this.fb.group({
      email: ['', [Validators.required]],
      password: ['', [Validators.required]]
    });
  }
login() {
    this.email = this.login_form.get('email').value;
    this.password = this.login_form.get('password').value;
    console.log("Email", this.email);
    console.log("Password", this.password);
    this.afAuth && this.afAuth.auth.signInWithEmailAndPassword(this.email, this.password)
      .then(function (result) {
        console.log(result);
        // alert("welcome to dashboard");
        window.location.reload();
        // this.isloggedin = result;
        // console.log("Logged In",this.loggedin);
      }).catch(function (error) {
        if (error) {
          alert('invalid Credentials');
        }
      });
  }

Answer 1

在app.component.ts 中，您可以检查用户是否已经登录并导航到您想要的页面：

constructor(public afAuth: AngularFireAuth, public router: Router) {}

ngOnInit(){
 if(this.afAuth.auth.currentUser != null){
    this.router.navigateByUrl("/home");
  }
else{
    this.router.navigateByUrl("/login");
}