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状态的通知时，您将始终具有某种浮华的效果。要么是您的整个页面，要么就是那条消息。

我将整个网站（登录页面除外）放在了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只是一件花哨的皮夹克。

Angular 5 AngularFire Firebase登录闪烁

1 个答案: