title: Angular2 canActivate() calling async function
body: <p>I am trying to use Angular2 router guards to restrict access to some pages in my app.  I am using Firebase Authentication.  In order to check if a user is logged in with Firebase, I have to call <code>.subscribe()</code> on the <code>FirebaseAuth</code> object with a callback.  This is the code for the guard:</p>
  
  <pre><code>import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
  import { AngularFireAuth } from "angularfire2/angularfire2";
  import { Injectable } from "@angular/core";
  import { Observable } from "rxjs/Rx";
  
  @Injectable()
  export class AuthGuard implements CanActivate {
  
      constructor(private auth: AngularFireAuth, private router: Router) {}
  
      canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable&lt;boolean&gt;|boolean {
          this.auth.subscribe((auth) =&gt; {
              if (auth) {
                  console.log('authenticated');
                  return true;
              }
              console.log('not authenticated');
              this.router.navigateByUrl('/login');
              return false;
          });
      }
  }
  </code></pre>
  
  <p>When a navigate to a page that has the guard on it, either <code>authenticated</code>, or <code>not authenticated</code> is printed to the console (after some delay waiting for the response from firebase).  However, the navigation is never completed.  Also, if I am not logged in I am redirected to the <code>/login</code> route.  So, the issue I am having is <code>return true</code> doesn't display the requested page to the user.  I'm assuming this is because I am using a callback, but I am unable to figure out how to do it otherwise.  Any thoughts?</p>