Angular CanActivate 与 Firebase 后端

Question

我正在开发一个带有 Firebase 后端的 Angular 应用。启动时，应用需要检查用户当前是否登录；如果用户已登录应用程序应导航到主页，如果用户未登录应用程序应导航到登录页面。

我想在 Home 路由定义上使用单个 canActivate AuthGuard 来实现这一点，即，

const homeRoutes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard]
  }
]

其中AuthGuard 实现canActivate 如下

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate() {
    // Need to work out what goes here
  }
}

现在 Firebase 提供了可观察的 onAuthStateChanged（请参阅 here），我可以使用它来确定用户当前是否登录，并且鉴于 canActivate 可以返回布尔可观察的，我可以写我的 AuthGuard如下

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private firebaseService: Firebase, private router: Router){}

  canActivate() {

      return Observable.create(obs => {
          this.firebaseService.onAuthStateChanged(user => {
              if (user) {
                 obs.next(true);
              }
              else {
                 obs.next(false);
                 router.navigate(['login']);
              }
          });
   }
}

当我启动未登录的应用程序时，这似乎有效，即我被定向到登录页面。但是，现在当我成功登录应用程序时，尝试导航到home，在AuthGuard 上调用canActivate，但此时似乎停止了，即我仍然在登录页面上。我认为这是因为我正在返回一个 observable，并且在调用 canActivate 之前状态已经改变，所以没有什么告诉 canActivate 它可以显示 home 页面。

有没有一种干净的方法来处理我需要canActivate 在启动时返回一个可观察对象的情况，以确保在我确定它们是否已经登录之前已经初始化 Firebase，然后让canActivate 返回一个一切都初始化后的布尔值？

Answer 1

我切换到了 AngularFire2，这使得这更容易：

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.af.authState.map(auth => {
      if (isNullOrUndefined(auth)) {
        this.router.navigate(['/login']);
        return false;
      } else {
        return true;
      }
    });
  }

Check this out

编辑

另一种选择是使用bindCallback 从回调中创建一个可观察对象并执行映射，就像我的示例一样。