angular 路由保护的 AngularFireAuth 重定向问题

Question

亲爱的 Whosebug 社区，

我有以下问题。我尝试将 FirebaseAuthentication 与 Angular7 一起使用，我正在尝试使用守卫保护路由，因此只有登录用户才能访问 /profile url.

我的登录（login.component.ts）看起来像这样。起初我导入 AngularFireAuth 并将其用于使用 Google、Facebook 或电子邮件登录。在 ngOnInit 方法中，我订阅了 authState 因此我可以重定向到用户。这一切都很好。

下一步我想为 /profile url 写一个 AuthGuard 所以只有登录用户可以访问他们的个人资料。未登录用户应首先重定向到 /login。

我的 AuthGuard (auth.guard.ts) 看起来像这样并且正在使用 class AuthService (auth.service.ts) 内部。这个 AuthService 被注入并提供了一个方法 isAuthenticated。如果用户通过身份验证，他应该看到他的个人资料，否则 AuthGuard 应该 return false 并将他重定向到登录。

AuthService 看起来像这样，它的方法 isAuthenticated 应该 return 如果用户已登录则为真，否则为假.

如果我不在函数末尾添加这个虚拟 return true，他将始终将我重定向回 /login 也是在我登录的时候。他还告诉我这个函数没有 return 值

所以我知道这个订阅在 isAuthenticated 方法中是不够的，但我很好奇检测用户是否登录的最佳解决方案是什么。

如果你们中的任何一个人有最佳实践类型的解决方案，如果他能告诉我就太好了。那里没有太多合适的教程。

与此同时，我将尝试继续在 google 上寻找解决方案。我希望你们中的某个人可以帮助我解决这个问题。谢谢:)

此致一月

Answer 1

订阅不能 return 值。

您可以使用地图代替订阅。

return this.afAuth.authState.pipe(map((res) => {
   if (res && res.uid)
      return true;

   return false;
});

还将 isAuthenticated 方法的 return 值签名从 boolean 更改为 Observable<boolean> 或 Observable<boolean> | boolean

Answer 2

我已经使用 Angular FireAuth 实现了与您相同的功能，这是我想出的：
函数 isAuthenticated 即 isLoggedIn

public isLoggedIn() {
    return this.afAuth.authState.pipe(first()).toPromise();
}

在我的保护下：

auth.guard.ts

canActivate (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.auth.isLoggedIn().then((value) => {
        if (value) {
            return true;
        } else {
            this.router.navigate(['./login']);
            return false;
        }
    });
}

希望对您有所帮助;)

编辑
我使用这些教程来更好地理解如何使用 AngularFireAuth： https://angularfirebase.com/tag/authentication/

在你的情况下，你有这个： https://angularfirebase.com/lessons/router-guards-to-redirect-unauthorized-firebase-users/

angular 路由保护的 AngularFireAuth 重定向问题

AngularFireAuth redirect issue with angular routing guard

firebase

firebase-authentication

angular

angular-router-guards