Angular 5 AngularFire Firebase登录闪烁

Question

我正在使用AngularFire2创建具有Firebase和Angular 5的登录系统。单击登录并注销后，一切正常。一个问题是，如果刷新页面，如下图所示，我会闪烁。显然，发生这种情况是因为javascript需要花费一些时间来加载。解决此问题的最佳方法是什么？通常，我使用PHP或其他后端语言创建登录系统，所以我永远不会遇到这个问题，因为我只检查SESSION变量进行登录，而页面直到完成才加载完成。在此页面立即加载，然后Javascript检查您是否已登录。

我知道我可以使用加载微调器，但我不喜欢使用该技巧的网站。另一种可能性是使用Javascript Cookie或JWT。我只想找出最佳做法。

另外，使用Firebase和Angular的登录系统是否也不安全，因为用户可以只更改Javascript变量？例如，用户可以设置afAuth.user。私人用户仪表板检查是否设置了此变量，并让用户查看此页面（如果已设置）。因此，有人不能通过设置afAuth.user变量进入私有仪表板。我了解我可以使用规则保护Firebase数据，并可以确保用户在访问数据库之前已登录。但是，如果您使用Firebase对前端Javascript进行身份验证，似乎无法对用户隐藏HTML代码。

这是 app.component.html

<div *ngIf="afAuth.user | async as user; else showLogin">
  <h1>Hello {{ user.displayName }}!</h1>
  <button (click)="logout()">Logout</button>
</div>
<ng-template #showLogin>
  <p>Please login.</p>
  <button (click)="login()">Login</button>
</ng-template>

<router-outlet></router-outlet>

我的app.component.ts档案是

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { AngularFireAuth } from 'angularfire2/auth';
import { auth } from 'firebase/app';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(public afAuth: AngularFireAuth) {
  }
  login() {
    var email = "test@test.com";
    var password = "testpass";
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((user) => {
        console.log(user);
      })
      .catch((error) => {
        console.log(error)
      });
  }
  logout() {
    this.afAuth.auth.signOut();
  }
}

app.module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LoginComponent } from './login/login.component';

import { AlertModule } from 'ngx-bootstrap';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AlertModule.forRoot(),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 1

首先，AngularFire auth与您所使用的没有什么不同。唯一的不同是，当auth状态更改时，您会收到通知（这种情况发生在可观察/承诺的情况下）。您仍然可以按照惯用的方式获得它this.af.auth.currentUser。但是，该值可能已经过时（用户已在某处注销，或会话已过期）

当您收到有关auth状态的通知时，您将始终具有某种浮华的效果。要么是您的整个页面，要么就是该消息。

我将我的整个网站（登录页面除外）置于一个警卫队的后面。路由加载之前会检查防护罩，看起来像这样：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.af.authState.pipe(
    map(auth => {
      if (isNullOrUndefined(auth)) {
        this.router.navigate(['/login']); //Redirect if not authenticated
        return false;
      } else {
        return true;
      }
    })
  );
}

在您的登录组件中，您可以订阅authState并在成功登录后重定向。

ngOnInit() {
  this.subsciption = this.af.authState.pipe(defaultIfEmpty()).subscribe(auth => {
    this.logginIn = false;
    if (!isNullOrUndefined(auth)) {
      this.router.navigate(['/overview']); //Redirect succesfull login
    }
  }, console.log, () => {
    this.logginIn = false;
  });
}

logginIn 用于显示微调器。

关于该安全问题。是的，任何人都可能看到您的HTML，但这不应该成为问题。它是您想要（并且应该）保护的数据。HTML只是一件花哨的皮夹克。