Angular2 CanActivate后衛無法正常工作

Question

我正在使用canActivate()的Observable<boolean>返回。 設置了以下功能進行測試，並且正確解析，顯示組件。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return Observable.from([{ admin: true }]).map(x =>
  {
    if (x.admin) return true;
    return false;
  });
}

但是，實際代碼的行為是我保留在登錄組件上，盡管控制台輸出指示應該激活路由。 上面測試的唯一真正區別是我正在調用服務this.auth.isAdmin()而不是使用Observable.from 。 this.auth.isAdmin()的結果是一個Observable<boolean> ，其值為true。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  const isAdmin$ = this.auth.isAdmin();
  return isAdmin$.map(x =>
  {
    console.log('isAdmin returned ' + x);
    if (!x) {
      console.log('redirectToLogin');
      this.auth.redirectToLogin(state.url);
      return false;
    } else {
      console.log('canActivate = true');
      return true;
    }
  });  
}

這是路由：

{
  path: 'admin',
  canActivate: [AdminGuard],
  children: [
    ...adminRoutes
  ]
},

這是我的控制台輸出：

isAdmin returned false
admin-guard.service.ts:27redirectToLogin
auth.service.ts:36 navigating to stored path "/admin"
auth.service.ts:21 Object {isAdmin: true, isPaid: false, $key: "xYFs8kMDpKdYKxDw4AL21FtnSWn1"}
admin-guard.service.ts:25 isAdmin returned true
admin-guard.service.ts:31 canActivate = true

以下是感興趣的isAdmin（）函數：

isAdmin(): Observable<boolean> {
    if (!this.auth) return Observable.from([false]);
    const uid = this.auth.uid;
    return this.af.database.object(`user/${uid}`).do(x => console.log(x)).map(x => x.isAdmin);
}

Answer 1

您的isAdmin函數返回的isAdmin無法完成。 AngularFire2 FirebaseObjectObservable實例未完成; 它們在底層數據發生變化時發出對象。

守衛歸來的觀察者必須完成。 您可以通過在發出第一個值時使用first （或take(1) ）來完成observable來確保這一點：

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<boolean> {
  const isAdmin$ = this.auth.isAdmin();
  return isAdmin$.first().map(x =>
  {
    console.log('isAdmin returned ' + x);
    if (!x) {
      console.log('redirectToLogin');
      this.auth.redirectToLogin(state.url);
      return false;
    } else {
      console.log('canActivate = true');
      return true;
    }
  });  
}

在撰寫本文時，返回的observable必須完成。 但是，Angular現在 first 調用 返回的observable，因此不再需要observable完成。