AngularFire Auth持久化调用报错BrowserLocalPersistence需new调用如何解决？

问题原因 #

AngularFire 7 对接 Firebase 9 模块化 SDK 时做了封装调整，其中browserLocalPersistence为构造类，而非 Firebase 官方通用 Web 文档中给出的预实例化常量，直接传入未实例化的类就会触发该调用错误。

修复方案 #

方案1：修改当前setPersistence调用参数 #

直接给browserLocalPersistence加上实例化语法即可，修改后代码如下：

// 注意从@angular/fire/auth导入相关依赖
import { GoogleAuthProvider, setPersistence, signInWithPopup, browserLocalPersistence } from '@angular/fire/auth';

constructor(private auth: Auth, private router: Router) {
  if (auth.currentUser) this.router.navigate(this.redirect);
}

async loginWithGoogle() {
  const provider = new GoogleAuthProvider();
  try {
    // 仅修改这一行，给browserLocalPersistence加new实例化
    await setPersistence(this.auth, new browserLocalPersistence());
    await signInWithPopup(this.auth, provider);
    this.message = 'Sign in successful';
    await this.router.navigate(this.redirect);
  } catch (error: any) {
    console.error(error);
    if (error.code) {
      this.message = `${error.code}: ${error.message}`;
    } else {
      this.message = 'There was a problem signing in. Please try again.';
    }
  }
}

方案2：全局配置持久化（更推荐） #

无需每次调用登录接口时手动设置持久化，直接在根模块导入provideAuth时配置即可，配置完成后可以删除loginWithGoogle方法中的setPersistence调用逻辑：

// app.module.ts 对应配置
import { NgModule } from '@angular/core';
import { provideAuth, getAuth, browserLocalPersistence } from '@angular/fire/auth';

@NgModule({
  imports: [
    // 其余导入保持不变
    provideAuth(() => {
      const auth = getAuth();
      auth.setPersistence(new browserLocalPersistence());
      return auth;
    }),
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Harry Allen