javascript - 使用 Firebase 模拟器在页面刷新时自动退出

Question

我在我的项目中使用 @angular/fire 来使用 firebase。为了测试与 firebase 服务的集成，我在命令行中运行 firebase emulators: start。在使用 ng serve --open 为 angular 应用程序提供服务时，每当我进行更改并保存任何文件时，页面都会重新加载，并且我会自动退出 Firebase 帐户。这仅在使用 Firebase 模拟器时发生。我不知道这是否是 @angular/fire 或 firebase auth 模拟器的问题。这非常令人沮丧，因为我需要登录 angular 应用程序中的每个文件更改。
我的 App.module.ts 对提供者有以下配置。每当我登录

  providers: [
    {
      provide: USE_AUTH_EMULATOR,
      useValue: environment.useEmulators ? ["localhost", 9099] : undefined,
    },
    {
      provide: USE_DATABASE_EMULATOR,
      useValue: environment.useEmulators ? ["localhost", 9000] : undefined,
    },
    {
      provide: USE_FIRESTORE_EMULATOR,
      useValue: environment.useEmulators ? ["localhost", 8080] : undefined,
    },
    {
      provide: USE_FUNCTIONS_EMULATOR,
      useValue: environment.useEmulators ? ["localhost", 5001] : undefined,
    },
  ],

Edit-1: 我通过在全局服务的构造函数中注入(inject) AngularFireAuth 来检查用户是否已登录。

  constructor(
    public firebaseAuth: AngularFireAuth
  ) {
      firebaseAuth.authState.subscribe(user => {
       console.log(user,"in authServices");
       this.authChange.next(user);
      })
  }

一旦我登录，它就会返回一个非空用户，但是如果我更改文件(或只是重新加载页面)并保存它，页面会重新加载，并且订阅回调中收到的用户为空。
Edit-2: 登录后，我在 user 订阅回调中收到以下 authState 数据。

Jm {G: Array(0), l: "AIzaSyDTWKynj8jL3hnLPP0Fe_uY-j4vKR4Ozf0", m: "[DEFAULT]", o: "workern-tester.firebaseapp.com", a: Ji, …}$: ƒ ()$b: Jm {G: Array(0), l: "AIzaSyDTWKynj8jL3hnLPP0Fe_uY-j4vKR4Ozf0", m: "[DEFAULT]", o: "workern-tester.firebaseapp.com", a: Ji, …}Aa: ƒ (f)Ba: ƒ (f)G: []N: um {a: Jm, b: Array(0), enrolledFactors: Array(0), c: ƒ}P: trueR: [ƒ]W: Fn {m: false, settings: fm, app: FirebaseAppImpl, a: Ji, R: Array(0), …}X: ["FirebaseUI-web"]a: Ji {c: "AIzaSyDTWKynj8jL3hnLPP0Fe_uY-j4vKR4Ozf0", l: "http://localhost:9099/securetoken.googleapis.com/v1/token", v: Ze, g: {…}, h: "http://localhost:9099/www.googleapis.com/identitytoolkit/v3/relyingparty/", …}aa: Fn {m: false, settings: fm, app: FirebaseAppImpl, a: Ji, R: Array(0), …}b: Bm {c: Ji, a: "MEmI8VAJA36h8ATV3o57OzoWemszZHMgmWA2pH2RZFkpqvQ4nA…To3w5TfWh2y0iWW4n-xJfiVfmrLBudZt8qvtNcb_UNLmYExZQ", b: ig}ba: Fn {m: false, settings: fm, app: FirebaseAppImpl, a: Ji, R: Array(0), …}displayName: nullemail: nullemailVerified: falsef: nullfb: nullha: tn {a: "AIzaSyDTWKynj8jL3hnLPP0Fe_uY-j4vKR4Ozf0:[DEFAULT]", b: Uk}i: Hl {i: {…}, u: 0, O: "workern-tester.firebaseapp.com", m: "AIzaSyDTWKynj8jL3hnLPP0Fe_uY-j4vKR4Ozf0", v: "[DEFAULT]", …}isAnonymous: falsel: "AIzaSyDTWKynj8jL3hnLPP0Fe_uY-j4vKR4Ozf0"m: "[DEFAULT]"metadata: Gm {a: "1606683443096", b: "1606712979911", lastSignInTime: "Mon, 30 Nov 2020 05:09:39 GMT", creationTime: "Sun, 29 Nov 2020 20:57:23 GMT"}multiFactor: um {a: Jm, b: Array(0), enrolledFactors: Array(0), c: ƒ}o: "workern-tester.firebaseapp.com"oa: undefinedpa: nullphoneNumber: "+917566675092"photoURL: nullproviderData: [Im]refreshToken: "MEmI8VAJA36h8ATV3o57OzoWemszZHMgmWA2pH2RZFkpqvQ4nA-u2MrzglVSO6e-_c4m9SdXDF9r1oiDWGrz7_UDP6ZxjdIatwf4OUCVGIo1o-d9z4dK7hmG4Q1n-tTmsgKb-vZNQ3SIUQ4ar1uYI8Jq3tgTo3w5TfWh2y0iWW4n-xJfiVfmrLBudZt8qvtNcb_UNLmYExZQ"tenantId: nullu: ym {c: 30000, f: 960000, h: ƒ, i: ƒ, g: ƒ, …}uid: "6e555FSHWBGj5jQKn28yilNC7cO1"v: hd {src: Jm, a: {…}, b: 4}xa: falseya: "eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJwaG9uZV9udW1iZXIiOiIrOTE3NTY2Njc1MDkyIiwiYXV0aF90aW1lIjoxNjA2NzEyOTc5LCJ1c2VyX2lkIjoiNmU1NTVGU0hXQkdqNWpRS24yOHlpbE5DN2NPMSIsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsicGhvbmUiOlsiKzkxNzU2NjY3NTA5MiJdfSwic2lnbl9pbl9wcm92aWRlciI6InBob25lIn0sImlhdCI6MTYwNjcxMjk3OSwiZXhwIjoxNjA2NzE2NTc5LCJhdWQiOiJ3b3JrZXJuLXRlc3RlciIsImlzcyI6Imh0dHBzOi8vc2VjdXJldG9rZW4uZ29vZ2xlLmNvbS93b3JrZXJuLXRlc3RlciIsInN1YiI6IjZlNTU1RlNIV0JHajVqUUtuMjh5aWxOQzdjTzEifQ."za: ƒ (f)_lat: "eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJwaG9uZV9udW1iZXIiOiIrOTE3NTY2Njc1MDkyIiwiYXV0aF90aW1lIjoxNjA2NzEyOTc5LCJ1c2VyX2lkIjoiNmU1NTVGU0hXQkdqNWpRS24yOHlpbE5DN2NPMSIsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsicGhvbmUiOlsiKzkxNzU2NjY3NTA5MiJdfSwic2lnbl9pbl9wcm92aWRlciI6InBob25lIn0sImlhdCI6MTYwNjcxMjk3OSwiZXhwIjoxNjA2NzE2NTc5LCJhdWQiOiJ3b3JrZXJuLXRlc3RlciIsImlzcyI6Imh0dHBzOi8vc2VjdXJldG9rZW4uZ29vZ2xlLmNvbS93b3JrZXJuLXRlc3RlciIsInN1YiI6IjZlNTU1RlNIV0JHajVqUUtuMjh5aWxOQzdjTzEifQ."__proto__: I "in authServices"

重新加载页面后，我在 authState 订阅的回调中收到如下所示的日志，并且此状态在片刻后不会更改。

null "in authServices"

Answer 1

如果您加载页面，Firebase 必须从本地存储恢复用户的登录状态。这需要它调用服务器，这可能需要一些时间。
出于这个原因，auth 状态最初是 null 是正常的，然后过了一会儿状态更改为已登录用户的状态。您的代码必须能够处理这种转换。