CODEWITHSUNDEEP
angularreduxrxjsobservablerxjs6
panagulis72
panagulis72

Reputation: 2169

Use tap() instead of map() RxJS and Angular

I have a login guard which basically check if the user il logged in. If he is logged, it skips the login and go to home page. I wrote this code, and this works:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(fromApp.isAuthenticated)
        .pipe(take(1),
            map(isAuthenticated => {
                if (isAuthenticated) {
                    this.router.navigate(['/home']);
                    return false;
                } else {
                    return true;
                }
            })
        )
}

Now, since I don't have to change or edit the output data (isAuthenticated boolean), I thought: well, why don't use tap operator? So, I re-write my code:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(fromApp.isAuthenticated)
        .pipe(take(1),
   HERE------> tap(isAuthenticated => {   <------ HERE
                if (isAuthenticated) {
                    this.router.navigate(['/home']);
                    return false;
                } else {
                    return true;
                }
            })
        )
}

Then I went to Chrome, and I saw black page and this was the case:

In any case, I see blank page. So, I went in debug and I noticed that it correctly jump inside the if/else block... so, why tap() is breaking the app?

Upvotes: 4

Views: 11355

Answers (2)

siva636
siva636

Reputation: 16451

This is the signature of canActivate:

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

canActivate must either return boolean or Promise. Therefore you must map it and return a boolean or Promise. tap will not do the trick.

Upvotes: 9

Picci
Picci

Reputation: 17762

The guard canActivate has to return an Observable<boolean> in order for the Angular guard mechanism to work.

Using map allows you to define a return which is different from what you get from isAuthenticated, and this probably explains what you see.

In your first version canActivate acutally returns an Observable<boolean> - in the second case it returns this this.store.select(fromApp.isAuthenticated).pipe(take(1)) , and probably it is not what you want.

Upvotes: 3

Related Questions