Angular 11 等待订阅完成获取数据

Question

我有一个 auth.service 和 data.service。 auth.service 从 data.service 获取数据，但它会在数据到达之前进行检查。所以它 returns 未定义。

auth.service 获取这样的数据；

get isLoggedIn(): boolean {
  const user = JSON.parse(localStorage.getItem('user'));
  const emailVerify = this.dataservice.userStatService(user.uid);
  console.warn(emailVerify)
  return (user !== null && emailVerify !== false && emailVerify !== undefined ) ? true : false;
}

data.service 像这样检查用户状态功能；

  userStatService(uid: any): any{
    console.error(uid)
    this.get(uid)
      .subscribe(
        data => {
          console.warn('status set', data.status)
          this.statData =  data.status;
        },
        error => {
          console.log(error);
    });
    return this.statData;
  }

这段代码现在是这样工作的； See console logs

我在等你的代码示例，谢谢。

更新： auth.guard代码；

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn() !== true) {
      this.router.navigate(['/auth/login'], { queryParams: { returnUrl: 'dashboard' } })
      .then(() => {
        this.authService.SignOut();
      });
    }else{
    return true;
    }
  }

Answer 1

observables 异步执行，你需要 return observable 并在消费者中订阅才能正确使用它：

 // return observable
 userStatService(uid: any): any{
    console.error(uid)
    return this.get(uid)
 }


isLoggedIn() {
  const user = JSON.parse(localStorage.getItem('user'));
  this.dataservice.userStatService(user.uid).subscribe(emailVerify => {
    console.warn(emailVerify)
  })
  // really can't do this while working with async execution. doesn't work.
  //return (user !== null && emailVerify !== false && emailVerify !== undefined ) ? true : false;
}

如果这是一个守卫，使用 map 运算符和 return 整个可观察值，angular 需要布尔值或可观察值：

isLoggedIn(): Observable<boolean> {
  const user = JSON.parse(localStorage.getItem('user'));
  if (!user)
    return of(false); // null guard and slight performance improvement
  return this.dataservice.userStatService(user.uid).pipe(map(emailVerify => {
    console.warn(emailVerify)
    return (emailVerify !== false && emailVerify !== undefined ) ? true : false;
  }))
}

并且在你的警卫中你需要再次，RETURN观察到的：

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isLoggedIn().pipe(
      map(isLoggedIn => {
        if (!isLoggedIn) {
          this.router.navigate(['/auth/login'], { queryParams: { returnUrl: 'dashboard' } }).then(() => {
            this.authService.SignOut();
          });
        }
        return isLoggedIn;
      })
    )
  }

angular 守卫将处理订阅，但你必须 return 守卫可以观察到。

Angular 11 等待订阅完成获取数据

Angular 11 wait until subscribe finishes getting data

subscription

promise

async-await

angular11