Angular2 canActivate() calling async function
<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>