Angular 11 wait until subscribe finishes getting data

Question

I have a auth.service and data.service. auth.service getting data from data.service but it checks before data arrives. So it returns undefined.

auth.service getting data like this;

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 check user status function like this;

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

and this code works like this now; See console logs

I'm waiting for your code examples, thank you.

Update: auth.guard code;

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

bryan60 · Accepted Answer · 2021-03-14T14:26:17.593

0

observables execute asynchronously, you need to return the observable and subscribe in the consumer to use it correctly:

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

if this is for a guard, use the map operator and return the whole observable, angular expects either a boolean or an observable:

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

and in your guard you need to again, RETURN THE OBSERVABLE:

  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 guards will handle the subscribing, but you must return the observable to the guard.

edited Mar 14 '21 at 14:26

answered Mar 13 '21 at 13:19

bryan60

28,215
4
48
65

it works but isLoggedIn must be return a boolean for authguard. How can I check user and emailVerify for authguard? – HighHill Mar 13 '21 at 14:19
angular guards can return observables, updated answer – bryan60 Mar 13 '21 at 14:33
console.warn does not log anyting. what could be the problem? – HighHill Mar 13 '21 at 15:30
i can't read code in comments, put your guard code in the question – bryan60 Mar 13 '21 at 16:34
okey, i added auth.guard code in the question. – HighHill Mar 13 '21 at 16:38
you're still trying to access an observable like it's synchronous. ya gotta learn the diff between async vs synchronous execution if you're gona do front end dev – bryan60 Mar 13 '21 at 17:20
it works! Thank you. But in auth.guard .pipe is showing errors. Thats errors is; Property 'pipe' does not exist on type 'boolean | Observable'. Property 'pipe' does not exist on type 'false'.ts(2339) – HighHill Mar 13 '21 at 20:17
fixed it, slight adjustment for the guard – bryan60 Mar 13 '21 at 20:33
Still showing same errors for pipe, i've tried restart ide and re-complie. – HighHill Mar 13 '21 at 21:06
I fixed just remove "Promise | boolean " from authService. Works very well. – HighHill Mar 14 '21 at 12:00

Angular 11 wait until subscribe finishes getting data

1 Answers1