在 Angular 应用程序中将 FirebaseAuth.onAuthStateChanged 调用放在哪里？答案

【问题标题】：Where to put FirebaseAuth.onAuthStateChanged call in Angular app?在 Angular 应用程序中将 FirebaseAuth.onAuthStateChanged 调用放在哪里？
【发布时间】：2020-03-07 14:39:20
【问题描述】：

在 Angular 应用中添加调用以初始化全局侦听器的合适位置是什么？

代码如下：

export class AuthService {
  constructor(
    private store: Store<fromAuth.State>,
    private afAuth: AngularFireAuth
  ) {
    this.afAuth.auth.onAuthStateChanged(payload => {
      if (payload) {
        const user: UserBeta = {
          uid: payload.uid,
          displayName: payload.displayName,
          email: payload.email,
          emailVerified: payload.emailVerified
        };

        this.store.dispatch(AuthActions.authenticated({ user }));
      } else {
        this.store.dispatch(AuthActions.notAuthenticated());
      }
    });
  }

如您所见，我已将其添加到 AuthService 的构造函数中，但它似乎不适合我。

我还担心以下代码有两个依赖项：Ngrx 和 AngularFireAuth。

在这种情况下，移动到FirebaseModule（即firebase.module.ts）的某个地方是否正确，如果是，调用会是什么样子？

【问题讨论】：

我一直在努力解决这个问题。我最终在需要检查用户以确保获得用户结果的组件中等待。根据我的经验，构造函数可能很棘手。我只是在服务中做了一个普通的方法，并在必要的组件中订阅它。在全球范围内拥有一些东西真的很难。
是啊，好像AppComponent的ngOnInit应该是这样

标签： javascript angular typescript firebase firebase-authentication

【解决方案1】：

您可以在ngOnInit() 中添加它，来自文档：

在默认更改检测器第一次检查指令的数据绑定属性之后，并且在检查任何视图或内容子项之前立即调用的回调方法。当指令被实例化时，它只被调用一次。

点击这里了解更多信息：

https://angular.io/api/core/OnInit

【讨论】：

【解决方案2】：

感谢大家的回复。

我终于决定在AuthService 中引入一个新的initialize() 方法，并在AppComponent 的ngOnInit() 方法中调用它。

auth.service.ts：

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(
    private http: HttpClient,
    private store: Store<fromAuth.State>,
    private afAuth: AngularFireAuth
  ) { }

  initialize() {
    this.afAuth.auth.onAuthStateChanged(payload => {
      if (payload) {
        const user: UserBeta = {
          uid: payload.uid,
          displayName: payload.displayName,
          email: payload.email,
          emailVerified: payload.emailVerified
        };

        this.store.dispatch(AuthActions.authenticated({ user }));
      } else {
        this.store.dispatch(AuthActions.notAuthenticated());
      }
    });
  }
}

app.component.ts：

export class AppComponent implements OnInit {
  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    this.authService.initialize();
  }
}

更新：在我的项目中，我使用ngrx 进行状态管理。由于AngularFireAuth还管理用户信息，我在多个地方管理同一个状态时遇到了困难，这增加了复杂性，所以最终的解决方案变得相当复杂。最后，我决定停止使用onAuthStateChanged 侦听器并开始在本地持久化ngrx 状态。

【讨论】：