Angular 4+ Guard with subscription

Question

My scenario makes me to authenticate/log-in an windows user when the route is activating. So I simply verify if the user is autheticated and if not I call the server to generate a token and expects to return true to canActivate() perhaps it does not work as expected.

piece of code:

auth.guard.ts

import { Observable } from 'rxjs/Observable';
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { AuthService } from './../data/auth.service';
import { TokenService } from '../auth/token.service';
import { of } from 'rxjs/observable/of';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(
        private loginService: AuthService,
        private tokenService: TokenService,
        private router: Router) {        
    }

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
        const operation = route.data.operation;

        if (!this.tokenService.isAuthenticated() && !this.login()) {            
            console.log('canActive1: ', false);
            return of(false);
        }

        console.log('canActive: ', true);
        return of(true);
    }    

    login() {
        this.loginService.getToken().subscribe((user) => {
            console.log('token returned..');
            if (user && user.token) {
                this.tokenService.storeToken(user.token);
                return true;
            }
            return false;
        });
    }
}

Console:

• canActivate1: false
• token returned..

Answer 1

This is asynchronous, therefore the console log comes later. Besides that, your problem is that you are trying to return data from subscribe, which is not possible. You need to return an Observable.

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const operation = route.data.operation;

    return this.login().map(bool => {
      if(!bool && !this.tokenService.isAuthenticated()) {
        return false;
      }
      return true;
      }
    })
}    

login() {
  // use map instead!
  return this.loginService.getToken().map((user) => {
    console.log('token returned..');
    if (user && user.token) {
      this.tokenService.storeToken(user.token);
      return true;
    }
    return false;
  });
}

Answer 2

You're not returning the result of your login() method. Try this instead.

login(): Observable<boolean> {
    return this.loginService.getToken().take(1).subscribe((user) => {
        console.log('token returned..');
        if (user && user.token) {
            this.tokenService.storeToken(user.token);
            return true;
        }
        return false;
    });
}

Answer 3

Firstly, you must return the results of login() function by using login() : Observable<boolean, as others have correctly mentioned.

Secondly, the problem as I can understand is with this line:-
if (!this.tokenService.isAuthenticated() && !this.login()).

I guess that when you are calling tokenService.isAuthenticated(), you must be checking if a user has got a token or not, right?

So, if a person hasn't got a token then this.tokenService.isAuthenticated() would return false and that's how your if (!this.tokenService.isAuthenticated() && !this.login()) will also be returning false beacuse of the AND condition you have applied.

Calling the login() function will set the token, but till then your tokenServiceisAuthenticated() function would've returned false and the routes would not get activated