Question

我已经使用Firebase设置了用户登录流程，现在正尝试防止用户未登录时访问页面。从Firebase docs得知，我可以跟踪用户登录状态使用onAuthStateChanged，但我不确定该函数中包含哪些内容，该功能使我无法识别用户是否从路由防护器登录。您如何使用onAuthStateChanged来跟踪登录状态？

编辑：

更具体地说，我不确定在调用onAuthStateChanged时如何定向路由器。我尝试拨打注入的路由器

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private afAuth: AngularFireAuth,
    private router: Router,
  ) {
    this.afAuth.auth.onAuthStateChanged(function(user) {
      if (user) {
        this.router.navigate('home');
      } else {
        this.router.navigate('login');
      } 
    });
  }
}

但是当调用onAuthStateChanged时，我收到一条错误消息，指出未定义this.router。

Answer 1

我意识到这个问题是匿名函数的范围界定问题。使用=>语法可以解决此问题。

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private afAuth: AngularFireAuth,
    private router: Router,
  ) {
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user) {
        this.router.navigate('home');
      } else {
        this.router.navigate('login');
      } 
    });
  }
}

如何使用Firebase的onAuthStateChanged跟踪Angular中的用户登录状态？

1 个答案: