Angular 5 AngularFire Firebase 登录闪烁

Question

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

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

另外，使用 Firebase 和 Angular 的登录系统不是不安全，因为用户可以更改 Javascript 变量吗？例如，用户可以只设置 afAuth.user。私有(private)用户仪表板检查是否设置了此变量，如果设置了则让用户查看此页面。所以不能有人通过设置 afAuth.user 变量进入私有(private)仪表板。我了解我可以使用规则保护 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 身份验证与您习惯的并没有什么不同。唯一的大区别是当身份验证状态更改时您会收到通知(这发生在可观察/ promise 中)。您仍然可以按照习惯的方式获取它:this.af.auth.currentUser。但是，该值可能已经过时(用户已在某处注销，或者 session 已过期)

当您收到有关身份验证状态的通知时，您总会有某种炫目的效果。要么是您的整个页面，要么就是那条消息。

我将我的整个网站(登录页面除外)放在 guard 后面.守卫在路线加载之前进行检查，看起来像这样:

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 只是一件花哨的皮夹克。