如何使用 Angular Firebase 实现 isLoggedIn 方法？答案

【问题标题】：How do you implement an isLoggedIn method with Angular Firebase?如何使用 Angular Firebase 实现 isLoggedIn 方法？
【发布时间】：2020-05-23 20:17:59
【问题描述】：

我正在尝试在我的 Angular 6 应用程序上使用 Firebase 实现 isLoggedIn 方法，但由于 firebase 用户是“订阅”对象而遇到问题，我正在尝试像常规方法 isLoggedIn() 一样使用它.

这是我目前所拥有的：

export class AngularFireAuthService {
    private firebaseUser$: Observable<firebase.User>;

    constructor(private angularFireAuth: AngularFireAuth) {
        this.firebaseUser$ = angularFireAuth.authState;
    }

    getFirebaseUser() {
        return this.firebaseUser$;
    }

    register(user: any) {
        return this.angularFireAuth.auth.createUserWithEmailAndPassword(user.email, user.password)
    }

    login(user: any) {
        return this.angularFireAuth.auth.signInWithEmailAndPassword(user.email, user.password)
    }

    logout() {
        return this.angularFireAuth.auth.signOut();
    }

    resetPassword(email: string) {
        return this.angularFireAuth.auth.sendPasswordResetEmail(email);
    }

    isLoggedIn() {
        //not sure how to do this.

        //I was trying to do something like this:
        // this.firebaseUser$.subscribe((user) => {
        //     if (user) {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // });
    }
}

有没有办法让我实现 isLoggedIn 方法，这样我就可以在我的任何组件中简单地调用它？我尝试使用谷歌搜索，似乎大多数人的做法是订阅 firebaseUser$ 对象，如果结果不为空，则假设用户已登录。但我想知道我是否可以绕过订阅我的每个组件，而只需调用 isLoggedIn 方法，该方法只会返回 true 或 false，如下所示：

if (this.angularFireAugthService.isLoggedIn()) {
   //do something
}

【问题讨论】：

用户的登录状态可能会在渲染之间发生变化，当这种情况发生时您需要更新您的 UI。那是人们使用订阅的原因。您当然可以使用更改的值来确定调用渲染循环时用户是否已登录，但您会错过更新。
但是在订阅之前我们是怎么做的呢？就像在 Angular 1 中一样。我可以通过检查 isLoggedIn 来手动控制我的视图，不是吗？
在任何 Angular 版本中，集成都建立在 Firebase 的 onAuthStateChanged 处理程序之上。在此处查看第一个 sn-p：firebase.google.com/docs/auth/web/…

标签： javascript angular firebase firebase-authentication angularfire2

【解决方案1】：

您可以在身份验证服务上添加一个属性，并在某些情况下对其进行跟踪。如果您想在重新加载时保持身份验证，您需要创建一个“侦听器”方法并在根组件中订阅它。

这是一个例子：

private isAuthenticated: boolean;

public isLoggedIn(): boolean {
     return this.isAuthenticated;
 }

public async login(email: string, password: string): Promise<void> {
    try {
      await this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
      this.isAuthenticated = true;
      ...
    } catch (error) {
      this.isAuthenticated = false;
      ...
    }
  }

public async logOut(): Promise<void> {
    try {
      await this.angularFireAuth.auth.signOut();
      this.isAuthenticated = false;
      ...
    } catch (error) {
       ...
     }
  }

// you subscribe to this in the root component
public initAuthListener(): Observable<User> {
    return this.angularFireAuth.authState.pipe(
      tap(user => {
        if (user) {
          this.isAuthenticated = true;
          // do stuff
        } else {
          this.isAuthenticated = false;
        }
      })
    );
  }

在你可以使用的任何组件中：

if (this.angularFireAugthService.isLoggedIn()) {
   //do something
}

更新

在app.component.ts 中，您需要注入身份验证服务并订阅OnInit 生命周期钩子中的initAuthListener 方法，如下所示：

constructor(private angularFireAugthService: AngularFireAuthService) {}

ngOnInit() {
  this.angularFireAugthService.initAuthListener().subscribe();
}

现在身份验证将持续存在，身份验证服务的isAuthenticated 属性将相应更新。

【讨论】：

您介意详细说明评论 //您在根组件中订阅了这个吗？你的意思是在 app.component.ts 中吗？你能举个例子吗？谢谢！

【解决方案2】：

Firebase has native function 如果已经登录则返回 userId。

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
   // ...
 } else {
    // User is signed out
    // ...
 }
});

【讨论】：