Angular 5 - 服务未更新订阅变量

Question

我对 Angular 还是很陌生..

我的网络应用程序中有一个 AuthService，它通过 Angularfire2 (firebase) 对用户进行身份验证，并将电子邮件和标志（指示用户是否填写了配置文件数据表单）插入到 firebase 数据库中。

我的路由守卫检查用户是否经过身份验证以及用户是否填写了配置文件数据表单，如果没有，我将重定向到配置文件数据表单。如果用户已经填写了表格，我会直接跳转到希望页面。

我通过UserData服务获取用户是否填写基本数据表：

  constructor(private afd: AngularFireDatabase, private authService: AuthService) {

  }

  isProfileComplete (): Observable<any> {
    return this.afd.list(`/users/${this.authService.uid}`)
            .snapshotChanges()

  }

然后在 authGuard 中执行逻辑来引导用户：

 constructor(private authService: AuthService,
              private router: Router,
              private usrData: UserDataService) {}

  canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    if (this.authService.isAuthenticated())  {
      console.log(this.usrData.isProfileComplete())
      this.usrData.isProfileComplete()
      .map(userInfos => {
        console.log(userInfos)
           userInfos.forEach(item => {
            console.log(userInfos)
            if ((item.payload.key === 'profileComplete') && (item.payload.val() === true)) {
              console.log('user is logged in & data form completed')
              return true;
            } else if ((item.payload.key === 'profileComplete') && (item.payload.val() !== true)) {
              this.router.navigate(['data_form']);
              console.log('user logged in not completed the form')
              return false;
            }
      })

      })

    }  else {
        this.router.navigate(['login']);
        console.log('user is not logged in ')
        return false;
    }
}

我认为代码没有到达 observable 的 ma​​p 部分以读取键 profileComplete

的值

有人能指点我正确的方向吗？

谢谢

Answer 1

以下是否返回 Observable？

this.usrData.isProfileComplete()

无论如何，您在 forEach 循环的上下文中返回 true / false，这意味着外部 map 方法没有返回任何内容。

您可能要考虑使用find 而不是forEach，然后您可以返回find 是否找到任何东西的结果：

return !!userInfos.find(item => (item.payload.key === 'profileComplete') 
                                && (item.payload.val() === true));

显然，这不能处理您想要返回表单的重定向情况，但应该为您指明正确的方向

Answer 2

您应该从CanActivate 返回此类型Observable<boolean> | Promise<boolean>。因为 JavaScript 不等待回调。示例：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

if (this.authService.isAuthenticated()) {
  console.log(this.usrData.isProfileComplete())
  return this.usrData.isProfileComplete()
    .map(userInfos => {
      console.log(userInfos)
      userInfos.forEach(item => {
        console.log(userInfos)
        if ((item.payload.key === 'profileComplete') && (item.payload.val() === true)) {
          console.log('user is logged in & data form completed')
          return of(true);
        } else if ((item.payload.key === 'profileComplete') && (item.payload.val() !== true)) {
          this.router.navigate(['data_form']);
          console.log('user logged in not completed the form')
          return of(false);
        }
      })

    })

} else {
  this.router.navigate(['login']);
  console.log('user is not logged in ')
  return of(false);
}

}