title: How to return Observable<boolean> in canActivate on a guarded route in Angular 6
body: <p>I would like to guard a route with a CanActivate class. The documentation I have read always has the <code>canActivate</code> method returning a boolean value, but I think I need to return either Observable or Promise.</p>
  
  <p>My app has a data store with a property <code>user</code> that is an <code>Observable&lt;User&gt;</code>.</p>
  
  <p>When the app loads, user.role is <code>undefined</code>. After an initial http request, the user.role becomes either "user" or "guest". So, I need the canActivate method to wait until user.role is set to either "user" or "guest", then respond. Here is what I have now:</p>
  
  <pre><code>  canActivate(): Observable&lt;boolean&gt; {
      return new Observable((observer: Observer&lt;boolean&gt;): void =&gt; {
        this.state.user.subscribe((user: User) =&gt; {
          if (user.role === 'user') {
            observer.next(true);
          } else if (user.role === 'guest') {
            observer.next(false);
            this.router.navigate(['/login']);
          }
          // user is not set, wait for next value
        });
      });
    }
  </code></pre>
  
  <p>The problem I think is that the subscription keeps going, and my router is sometimes unexpectedly redirected when state.user is updated. How can I fix this. Or, is there a better way to do this?</p>