Firebase auth setPersistance({type: 'SESSION'}) throws INTERNAL ASSERTION FAILED: Expected a class definition答案

【问题标题】：Firebase auth setPersistance({type: 'SESSION'}) throws INTERNAL ASSERTION FAILED: Expected a class definitionFirebase auth setPersistance({type: 'SESSION'}) throws INTERNAL ASSERTION FAILED: Expected a class definition
【发布时间】：2021-12-26 07:43:50
【问题描述】：

我正在尝试在我的登录表单中实现一个“记住我”复选框。

我使用Angular CLI 12.2.9、firebase 9.4.0 和@angular/fire 7.4.0 创建了项目

我有以下服务auth.service.ts

import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';

import { Auth } from '@angular/fire/auth';

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

  constructor(private auth: Auth) {
    
  }

  public async setPersistence(persistence: boolean): Promise<void> {
    if (persistence) {
      await this.auth.setPersistence({ type: 'SESSION' });
    } else {
      await this.auth.setPersistence({ type: 'NONE' });
    }
  }
}

@angular/fire/auth中的Persistance接口如下：

/**
 * An interface covering the possible persistence mechanism types.
 *
 * @public
 */
export declare interface Persistence {
    /**
     * Type of Persistence.
     * - 'SESSION' is used for temporary persistence such as `sessionStorage`.
     * - 'LOCAL' is used for long term persistence such as `localStorage` or `IndexedDB`.
     * - 'NONE' is used for in-memory, or no persistence.
     */
    readonly type: 'SESSION' | 'LOCAL' | 'NONE';
}

由于某种原因，当我在组件中调用 setPersistence 时，出现以下错误：

这是我的组件：

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;

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

  public ngOnInit(): void {
    this.login.get("rememberMe")?.valueChanges.subscribe((p: boolean) => {
      this.auth.setPersistence(p).then((res) => {
        console.log("Changed success");

      })
    });
  }

}

我做错了什么？如果这不是更改用户身份验证持久性的正确方法，请引导我通过正确的路径。提前致谢。

【问题讨论】：

标签： angular typescript firebase

【解决方案1】：

它似乎期望已经在库中的对象。例如：

.setPersistance(Auth.Persistence.SESSION)

【讨论】：

【解决方案2】：

我通过进行以下导入来修复它：

import { Injectable } from '@angular/core';

import {
  Auth,
} from '@angular/fire/auth';

import {
  setPersistence,
  inMemoryPersistence,
  browserSessionPersistence,
  Persistence,
} from '@firebase/auth';

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

  constructor(
    private auth: Auth,
  ) {

  }


  public async setPersistence(persistence: boolean): Promise<void> {
    const type: Persistence = persistence
      ? browserSessionPersistence
      : inMemoryPersistence;

    await setPersistence(this.auth, type);
  }
}

【讨论】：