Angular2 CanActivate后卫无法正常工作

发布时间：2020-12-17 17:22:17 所属栏目：安全来源：网络整理

导读：我正在使用Observable boolean返回canActivate(). 设置了以下功能进行测试,并且正确解析,显示组件. canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observableboolean { return Observable.from([{ admin: true }]).map(x = { if

我正在使用Observable< boolean>返回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>值为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);
}

解决方法

您的isAdmin函数返回的observable无法完成. 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现在在返回的observable上调用first,因此不再需要observable完成.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!