4

亲爱的 stackoverflow 社区，

我有以下问题。我尝试将 FirebaseAuthentication 与 Angular7 一起使用，并尝试使用警卫保护路线，因此只有登录的用户才能访问/profile url。

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

登录组件.ts

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

应用程序路由.module.ts

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

AuthGuard

AuthService看起来像这样，如果用户登录，它的方法isAuthenticated应该返回 true，否则返回 false 。

身份验证服务

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

错误。 函数需要返回值

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

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

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

最好的问候简

4

2 回答 2

3

订阅不能返回值。

您可以使用地图而不是订阅。

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

   return false;
});

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

于 2018-12-28T14:25:20.413 回答
3

我已经使用 Angular FireAuth 实现了和你一样的东西，这就是我想出的：
Function isAuthenticated ie 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/

于 2018-12-28T14:41:19.030 回答