Angular Guard and JWT

Question

I am trying to do the next... i have an API where i send a JWT token by POST to be verified if it is valid/expired,

so in my angular login service i have a method like this.

isUserlogged() {
  return this.httpClient.get(`${this.URL}/verifyToken`, { headers: { 'authorization': localStorage.getItem('token') } })   
}

this subscription returns a boolean, all ok here.

Now i am implementing Guards in my app, so now i want to use that boolean value for my canActivate method to block the access... i read that i need to return, true or false in this method to allow or block the access to the routes that i configured before

So i am doing something like this inside of canActivate.

this.loginService.isUserlogged().subscribe((response: boolean)=>{  

if(response){
   return true;
}
   return false;
});

but this is returning void... why? how can i retreive the true or false value from this subscription?

try just returning `this.loginService.isUserlogged()`. – Phix Dec 10 '18 at 04:20 — Phix, Dec 10 '18 at 04:20

Ashish Ranjan · Accepted Answer · 2018-12-10T04:40:04.383

2

Don't return a subscription from inside a route a guard, If not boolean then return an Observable of boolean.

return this.loginService.isUserlogged()

Since "isUserlogged" is already giving you a boolean output here, you can directly return the Observable.

If isUserlogged() is not returning a boolean then pipe it.

return this.loginService.isUserlogged().pipe(
    map((resp) => {
        // some logic here, check the return.
        // based on the logic
        if (something) {
            return true
        }
        return false
    })
)

This will all work if your API call is getting finished and returning a proper response. If your API is returning void, then you have not provided any details regarding your API call and your API works. (First test your API with an HTTP client, like: Postman, if that is giving a proper response then integrate it with Angular)

edited Dec 10 '18 at 04:40

answered Dec 10 '18 at 04:20

Ashish Ranjan

12,760
5
27
51

isUserlogged is not returning a boolean... there is where i have the problem i think... – Sergio Cano Dec 10 '18 at 04:34
this._login.isUserlogged().subscribe((response: Observable) => { return response; }) – Sergio Cano Dec 10 '18 at 04:39
@SergioCano: Check the updated answer. And Where are you doing the `subscribe()`. You shouldn't do a subscribe in `canActivate()`. Anyway log `response`in your `subscribe` and tell me what do you see. – Ashish Ranjan Dec 10 '18 at 04:41
my API is checked with postman and even in angular i log the response and i receive, true/false depending if token is valid or not... so let me try the piece of code that you updated. – Sergio Cano Dec 10 '18 at 04:44
is map, imported by rxjs? sorry i am new in angular – Sergio Cano Dec 10 '18 at 04:48
@SergioCano `import { map } from 'rxjs/operators'` – Ashish Ranjan Dec 10 '18 at 04:50
i am using the piece of code that you sent me, i have response in a log, and is loggin true or false... perfectly, i have return response... so in my canActivate i have... this.loginService.isUserlogged()... but i have an error, do i have tu subscribe after or something?... jesus i am stuck here :( – Sergio Cano Dec 10 '18 at 05:00
with your code, isUserlogged(), is returning an Observable. but canActivate only accept booleans... so how can i change it? – Sergio Cano Dec 10 '18 at 05:06
@SergioCano canActivate method accepts both boolean and observable of type boolean. so, you can return observable of type boolean – Saad Mehmood Dec 10 '18 at 05:19
@SergioCano canAtivate() returns a lot a of things: https://angular.io/api/router/CanActivate. In your case, make your code someting like: `canActivate(): Observable | boolean {...}` – Ashish Ranjan Dec 10 '18 at 05:26
1

wow finally, yea adding what is returning canActivate it is working... damn this sintax ... THANKS A LOT !!! – Sergio Cano Dec 10 '18 at 05:29

score 0 · Answer 2 · answered Jun 11 '20 at 08:16

My solutions, Promise Method and a healthy running guard.


canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return this.mailVerifyControl()
      .then(() => {
        return true;
      })
      .catch((err) => {
        return false;
      });
  }


  mailVerifyControl(): Promise<boolean> {
    return new Promise((resolve, reject) => {
      if (this.authService.isMailVerified === true) {
        reject()
      }
      resolve();
    });
  }

Angular Guard and JWT

2 Answers2