Angular Fire 7.x+获取用户认证状态报错问题求助

在Angular Fire 7+的模块化API中，Auth对象不再提供小写的authstate属性，你需要通过以下两种方式修改代码，实现用户登录、登出状态的监听：

方式1：使用Angular Fire提供的authState Observable #

这是更符合Angular响应式编程习惯的方式，步骤如下：

1. 从@angular/fire/auth导入authState工具函数
2. 通过authState(this.auth)获取用户状态的Observable并订阅

修改后的代码示例：

import {
    Auth,
    signInWithEmailAndPassword,
    createUserWithEmailAndPassword,
    signOut,
    User,
    authState // 新增导入
} from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
    user: User | null = null;
    // 可直接暴露Observable供组件订阅
    user$ = authState(this.auth);
    
  constructor(private auth: Auth) { 
    // 订阅用户状态变化
    this.user$.subscribe(user => {
        this.user = user;
        // 这里可以添加登录/登出后的业务逻辑
    });
  }
}

方式2：使用Firebase原生的onAuthStateChanged方法 #

如果你更习惯原生Firebase的回调式写法，可以用这种方式：

1. 从@angular/fire/auth导入onAuthStateChanged方法
2. 调用该方法传入Auth实例和状态变化回调，记得保存取消订阅的函数防止内存泄漏

修改后的代码示例：

import {
    Auth,
    signInWithEmailAndPassword,
    createUserWithEmailAndPassword,
    signOut,
    User,
    onAuthStateChanged // 新增导入
} from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
    user: User | null = null;
    private unsubscribeAuth?: () => void;
    
  constructor(private auth: Auth) { 
    // 监听用户状态变化
    this.unsubscribeAuth = onAuthStateChanged(this.auth, user => {
        this.user = user;
        // 这里可以添加登录/登出后的业务逻辑
    });
  }

  // 服务销毁时取消监听，避免内存泄漏
  ngOnDestroy() {
    this.unsubscribeAuth?.();
  }
}

关键说明 #

• Angular Fire 7+采用模块化API，所有工具函数都需要显式导入，不再依赖AngularFireAuth这类封装类
• 推荐使用方式1的Observable模式，便于在组件中通过async管道直接绑定用户状态

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