Question

尊敬的stackoverflow社区，

我有以下问题。我尝试将FirebaseAuthentication与Angular7结合使用，并尝试使用防护来保护路由，因此只有登录的用户才能访问 / profile 网址。

我的登录名（ login.component.ts ）如下所示。首先，我导入 AngularFireAuth 并将其用于通过Google，Facebook或Email登录。在 ngOnInit 方法中，我订阅了 authState ，因此我可以重定向到用户。一切正常。

下一步，我想为 / profile 网址编写 AuthGuard ，这样只有登录的用户才能访问其个人资料。未登录的用户应首先重定向到 / login 。

我的 AuthGuard （ auth.guard.ts ）看起来像这样，并且正在使用类 AuthService （ auth.service。 ts ）。此 AuthService 已被注入，并提供了一种方法 isAuthenticated 。如果用户通过了身份验证，则应该向他显示其个人资料，否则 AuthGuard 应该返回false并将其重定向到登录名。

AuthService 如下所示，如果用户登录，则其方法 isAuthenticated 应该返回true，否则返回false。

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

因此，我知道 isAuthenticated 方法中的订阅不够，但是我很好奇，最好的解决方案是检测用户是否已登录。

如果你们中的一个人拥有最佳实践类型的解决方案，那么如果他能告诉我，那将是非常好的。那里没有很多合适的教程。

在此期间，我将尝试继续在Google上寻找解决方案。我希望你们中的某人可以帮助我解决这个问题。谢谢：）

最好的问候扬

Answer 1

订阅无法返回值。

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

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

   return false;
});

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

Answer 2

我已经使用Angular FireAuth来实现与您相同的东西，这就是我想出的：
功能已通过身份验证，即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/

AngularFireGuard的AngularFireAuth重定向问题

2 个答案: