Angular2 CanActivate保护无法正常工作

瑞安·兰顿（Ryan Langton）

我正在使用Observable<boolean>return canActivate()。设置了以下功能进行测试，并且可以正确解析，该组件将显示。

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>与真实值。

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);
}

卡坦

您的isAdmin函数返回的可观察对象未完成。AngularFire2FirebaseObjectObservable实例未完成；它们会随着基础数据的变化而发出对象。

守卫返回的可观察物必须完成。您可以通过发出第一个值时使用first（或take(1)）完成可观察的操作来确保这一点：

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;
    }
  });  
}

在撰写本文时，有必要完成返回的可观察值。但是，Angular现在调用 返回的可观察对象，因此不再需要该可观察对象完成。first

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。