Negating the result of a promise in a guard

Question

I have a working angular2 guard with a canActivate() that calls a service for isLoggedIn() and returns a promise which then resolves and the route is handled appropiately.

However, I am trying to do the opposite, see when the user is not logged in, and it isn't working.

I tried something as simple as this (adding a ! operator), hoping it would work:

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService) {}

    canActivate() {
        return !this.authService.isLoggedIn();
    }
}

However, this always returns a falsey value and the route never activates.

This is a relevant excerpt of my isLoggedIn() function:

isLoggedIn(): Promise<Boolean> {
  var component = this;
  return new Promise((resolve, reject) => {       
      component.queryForUser((user) => {
        resolve(user != null);
      });
    }
  });
}

If the user is not equal to null, then he is logged in and the promise resolves with true. Else, false.

While I could simply add a parameter to specify which state I am looking for, or even create a isNotLoggedIn() function, with the same logic but inverted, I ask, Is there a way to negate the value of the promise's resolve for the canActivate()?

Answer 1

return !this.authService.isLoggedIn() won't work, because of how JS works. this.authService.isLoggedIn() is promise object and is truthy. !this.authService.isLoggedIn() will always be false.

Instead, promise result should be mapped to negated result with

canActivate() {
    return this.authService.isLoggedIn().then(result => !result);
}

Or

async canActivate() {
    return !(await this.authService.isLoggedIn());
}

The parentheses around await ... are optional and used for readability.

Answer 2

All you need to do is some further manipulation of the promise's resolved value:

canActivate() {
    return this.authService.isLoggedIn().then(loggedIn => !loggedIn);
}