Angular 17 Guard 始终重定向到使用 Firebase 身份验证登录

Question

我正在尝试为我的应用程序编写一个简单的防护。我的身份验证系统基于 firebase，可以使用 Google 登录。 这是我的守卫代码：

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const AuthGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService)
  console.log("Guard state: ", authService.user)

  if(!authService.isLoggedIn()){
    inject(Router).navigate(['login'])
  }

  return authService.isLoggedIn()
}

authService.isLoggedIn()

方法仅返回

auth.currentUser

的值。

现在，如果我调用这个函数，比如说，在我的应用程序组件中使用（单击）事件，一切正常，但在守卫内部我总是得到一个错误。 我怀疑问题出在服务注入上，也许每次都会创建一个新的 AuthService 实例，从而丢失了对实际身份验证情况的所有参考。 有什么想法吗？

Answer 1

我通过在 authService 中创建一个新的 Promise 解决了这个问题。 Promise 在

onAuthStateChanged()

内得到解决或拒绝，因此我可以使 canActivate 方法异步并等待身份验证状态更新。