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

Question

我是 Angular 的新手..

我的 Web 应用程序中有一个 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 的 map 部分来读取键 的值配置文件完成

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

谢谢

Answer 1

你应该 return 这种来自 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);
}

}

Answer 2

下面的 return 是 Observable 吗？

this.usrData.isProfileComplete()

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

您可能想考虑使用 find 而不是 forEach，然后您可以 return find 是否找到任何内容的结果：

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

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

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

Angular 5 - Service Not Updating Subscribed Variable

angular

angular2-routing

angular5

angularfire2

angular-observable