typescript – Angular2 canActivate()调用异步函数

我试图使用Angular2路由器守卫来限制对我应用程序中某些页面的访问.我正在使用Firebase认证.为了检查用户是否使用Firebase登录,我必须使用回调函来调用FirebaseAuth对象上的.subscribe().这是守卫的代码：

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<Boolean>|Boolean {
        this.auth.subscribe((auth) => {
            if (auth) {
                console.log('authenticated');
                return true;
            }
            console.log('not authenticated');
            this.router.navigateByUrl('/login');
            return false;
        });
    }
}

当导航到具有防护的页面时,经过身份验证或未经过身份验证的页面将打印到控制台(等待响应从Firebase发出一些延迟之后).但是,导航从未完成.另外,如果我没有登录,我被重定向到/ login路由.所以,我遇到的问题是返回true不会向用户显示所请求的页面.我假设这是因为我使用回调,但是我无法弄清楚如何做到这一点.有什么想法吗？

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth,state:routerStateSnapshot):Observable<Boolean>|Boolean {
        return this.auth.map((auth) => {
            if (auth) {
                console.log('authenticated');
                return true;
            }
            console.log('not authenticated');
            this.router.navigateByUrl('/login');
            return false;
        }).first(); // this might not be necessary - ensure `first` is imported if you use it
    }
}