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?
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.