Angular 5 - служба не обновляет подписанную переменную

Question

Я довольно новичок в Angular ..

У меня есть веб-приложение AuthService, которое аутентифицирует пользователей с помощью Angularfire2 (firebase) и вставляет электронное письмо и флаг (указывающий, заполнил ли пользователь форму данных профиля.) в базу данных firebase.

Мой администратор маршрута проверяет, прошел ли пользователь проверку подлинности и заполнил ли пользователь форму данных профиля, если нет, я перенаправляю на форму данных профиля.Если пользователь уже заполнил форму, я перенаправляю на страницу надежды.

Я получаю, заполнил ли пользователь основную форму данных через Сервис пользовательских данных:

  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;
    }
}

Я думаю, что код не достигает раздела map наблюдаемой чтобы прочитать значения для ключа profileComplete

Может ли кто-нибудь любезно указать мне правильное направление, пожалуйста?

Спасибо

Answer 1

Возвращает ли следующее Observable?

this.usrData.isProfileComplete()

В любом случае, вы возвращаете true / false из контекста вашего цикла forEach, что означает, что метод внешней карты ничего не возвращает.

Возможно, вы захотите использовать find вместо forEach, тогда вы можете вернуть результат того, что find нашел что-то:

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

Очевидно, что это не справитсявы перенаправляете случай, когда вы хотите вернуться к форме, но должны указать правильное направление

Answer 2

Вы должны вернуть этот тип Observable<boolean> | Promise<boolean> из CanActivate.Потому что 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);
}

}