I'm attempting to add a Route Guard that will send a JWT to a PHP API that will return true or false depending on if the user is authenticated. Through my testing, the Route Guard works until it actually calls the API. If the API returns false, the guard works as expected. However, if the API returns true, then the guard seems to want to redirect the user as if it had returned false, but instead of displaying the home screen, it just displays a nothing.
auth.guard.ts
canActivate(): boolean {
if (localStorage.getItem('portfolioJWT') === null) {
this.router.navigate(['/']);
return false;
} else {
const token = JSON.parse(localStorage.getItem('portfolioJWT'));
this.authService.isAuth(token).subscribe(res => {
console.log(res);
if(!res) {
this.router.navigate(['/']);
console.log("NOT Authorized");
return false;
} else {
console.log("Authorized");
return true;
}
});
}
}
auth.service.ts
isAuth(token: string): Observable<Boolean> {
const authHttpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + token
})
};
return this.http.post<Boolean>('http://portfolioapi/api/checkAuth', {}, authHttpOptions);
}
I have the guard console logging the returned value, and whether or not the user is authorized, which it does and it shows the correct data.