时间戳

首页 > 解决方案 > AngularFireAuth重定向问题与角度路由保护

angular - AngularFireAuth重定向问题与角度路由保护

问题描述

亲爱的 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方法中是不够的，但我很好奇检测用户是否登录的最佳解决方案是什么样的。

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

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

最好的问候简

标签： angularfirebasefirebase-authenticationangular-router-guards

解决方案

订阅不能返回值。

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

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

   return false;
});

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

推荐阅读