Angular调用Firebase Auth setPersistence抛出内部断言错误如何解决

问题原因 #

你遇到的报错核心是以下两个错误导致的：

1. Firebase Auth v9（对应@angular/fire v7）的setPersistence方法不接收手动构造的{type: 'xxx'}字面量对象，必须使用官方导出的预定义持久化实例，你传入自定义对象会触发内部类校验逻辑，直接抛出INTERNAL ASSERTION FAILED: Expected a class definition错误。
2. @angular/fire v7使用了Firebase 9的模块化API，持久化设置方法不再挂载在Auth实例上，需要调用独立导入的setPersistence方法。

正确实现步骤 #

1. 修改AuthService代码 #

首先导入官方提供的持久化常量，重写setPersistence方法：

import { Injectable } from '@angular/core';
import { Auth, browserLocalPersistence, browserSessionPersistence, setPersistence, signInWithEmailAndPassword } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private auth: Auth) { }

  // 设置持久化
  public async setPersistence(rememberMe: boolean): Promise<void> {
    // 勾选记住我用本地持久化（长期有效），不勾选用会话持久化（关闭浏览器失效）
    const persistence = rememberMe ? browserLocalPersistence : browserSessionPersistence;
    await setPersistence(this.auth, persistence);
  }

  // 补充登录方法示例
  public async login(email: string, password: string) {
    return signInWithEmailAndPassword(this.auth, email, password);
  }
}

常量对应关系：

• browserLocalPersistence 对应你看到的LOCAL类型，存储在localStorage，长期有效
• browserSessionPersistence 对应SESSION类型，存储在sessionStorage，关闭浏览器就清除
• inMemoryPersistence 对应NONE类型，仅存在内存中，页面刷新就失效

2. 修改登录组件逻辑 #

不要在ngOnInit中监听复选框变化反复调用持久化设置，持久化设置仅需要在登录前调用一次即可，对后续的登录操作生效，修改后组件代码参考：

import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { emailRegex } from './email.regex';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  public login: FormGroup;
  public loginError = '';

  constructor(private fb: FormBuilder, private authService: AuthService) {
    this.login = this.fb.group({
      email: ['', [Validators.required, Validators.pattern(emailRegex)]],
      password: ['', Validators.required],
      rememberMe: false,
    });
  }

  ngOnInit(): void {
    // 不需要在这里监听rememberMe变化
  }

  // 登录表单提交触发
  async onSubmit() {
    if (this.login.invalid) return;
    this.loginError = '';
    const { email, password, rememberMe } = this.login.value;
    try {
      // 先设置持久化
      await this.authService.setPersistence(rememberMe);
      // 再执行登录
      await this.authService.login(email, password);
      // 登录成功后的跳转逻辑，比如跳转到首页
      console.log('登录成功');
    } catch (err: any) {
      this.loginError = err.message || '登录失败，请检查账号密码';
    }
  }

}

最后在你的登录表单模板里，把提交事件绑定到onSubmit方法即可。

注意事项 #

• 持久化设置只对设置完成后触发的登录操作生效，已经处于登录状态的用户修改持久化不会改变当前会话的存储规则
• 不要频繁调用setPersistence方法，仅在登录前调用一次即可，反复调用无意义还可能引发异常

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