代码之家 › 专栏 › 技术社区 › Prabhu

如何使用Angular Firebase实现isLoggedIn方法?

angularfire2 firebase-authentication firebase angular javascript

0

Prabhu · 技术社区 · 6 年前

我试图在Angular 6应用程序上用Firebase实现一个isLoggedIn方法,但遇到了问题,因为Firebase用户是一个“subcription”对象,我试图像常规方法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
}

0 回复 | 直到 6 年前

1

ionut-t 6 年前

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

下面是一个例子:

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 您需要注入身份验证服务并订阅 initAuthListener 方法 OnInit 生命周期钩是这样的:

constructor(private angularFireAugthService: AngularFireAuthService) {}

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

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

2

0

Dharman vijay 5 年前

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
    // ...
 }
});