在Angular 4的canactivate Guard中可以观察到可观察到的内部

时间:2017-11-14 17:30:31

标签: angular typescript angular-ui-router observable

所以我必须在路由器的canActivate防护中做两件事。首先,我必须检查用户是否已获得授权,我是通过调用OpenIdcSecutiry服务来执行此操作,然后如果用户已获得授权,则必须通过调用另一个返回UserProfile的服务(包括其角色)来检查用户角色。我知道我可以返回一个Observable,事实上如果我这样做:

return this.oidcSecurityService.getIsAuthorized();

它有效,但显然我没有检查用户角色。现在我有这个:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

return this.oidcSecurityService.getIsAuthorized()
  .map(
    data => {
      if (data === false) {
        this.router.navigate(['/login']);
        return data;
      }
      if (data === true) {
        const roles = route.data['roles'] as Array<string>;
        if (roles) {
        this.profileService.getObservableUserProfileFromServer().map(userProfile => {
          const userRoles = userProfile.Roles;
          for (const role of roles) {
            if (userRoles.indexOf(role) > -1) {
              return true;
            }
          }
          return false;
        });
        }
        return data;
      }
    },
    error => {
      this.router.navigate(['/login']);
      return error;
    }
  );
永远不会调用

this.profileService.getObservableUserProfileFromServer(),在我知道用户已获得授权后,我不知道如何检查用户角色。我怎样才能做到这一点?我可以在观察者内部返回观察者吗?

EDIT1:我将代码更改为:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

return this.oidcSecurityService.getIsAuthorized()
  .map(
    data => {
      if (data === false) {
        this.router.navigate(['/login']);
        return data;
      }
      if (data === true) {
        const roles = route.data['roles'] as Array<string>;
        if (roles) {
          return this.profileService.getObservableUserProfileFromServer().toPromise().then(userProfile => {
              const userRoles = userProfile.Roles;
              for (const role of roles) {
                if (userRoles.indexOf(role) > -1) {
                  return true;
                }
              }
              return false;
          }
            );
        }
        return data;
      }
    },
    error => {
      this.router.navigate(['/login']);
      return error;
    }
  );

//返回this.oidcSecurityService.getIsAuthorized();

}

现在我可以看到如何调用this.profileService.getObservableUserProfileFromServer并从服务器接收结果,但是在canActivate guard中没有评估结果,它只是忽略了结果而它表示导航已被取消。

编辑决赛:

@llai给了我答案,必须使用两个switchmap来链接几个observable,最终代码在这里:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

return this.oidcSecurityService.getIsAuthorized()
  .switchMap(
    data => {
      if (data === false) {
        this.router.navigate(['/login']);
        return Observable.of(false); // user not logged in, canActivate = false
      } else if (data === true) {
        const roles = route.data['roles'] as Array<string>;
        if (roles) {
          // return inner observable
          return this.profileService.getObservableUserProfileFromServer()
            .switchMap(userProfile => {
              const userRoles = userProfile.Roles;
              for (const role of roles) {
                if (userRoles.indexOf(role) > -1) {
                  // role found, canActivate = true
                  return Observable.of(true);
                }
              }
              // no matching role, canActivate = false
              return Observable.of(false);
            });
        } else {
          // no roles defined in route data, canActivate = false
          return Observable.of(true);
        }
      }
    });

}

1 个答案:

答案 0 :(得分:3)

正如克里斯蒂安在评论中提到的,你应该使用switchMap将你的观察者链接在一起。

在你的第一个实现中,你没有返回你的内部observable,因此路由器永远不会订阅它,所以它永远不会被调用。

在你的第二个实现中,你正在“订阅”(转换为promise + then)到map函数中的observable,这会使内部可观察到火。但是由于观察者没有返回守卫,守卫不会等待内部观察者完成。

相反,你应该链接observable并将该链接序列返回到守卫。这将允许警卫订阅序列并等待正确的响应。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

    return this.oidcSecurityService.getIsAuthorized()
      .switchMap(
        data => {
          if (data === false) {
            this.router.navigate(['/login']);
            return Observable.of(false); // user not logged in, canActivate = false
          }else if (data === true) {
            const roles = route.data['roles'] as Array<string>;
            if (roles) {
              // return inner observable
              return this.profileService.getObservableUserProfileFromServer()
                .map(userProfile => {
                  const userRoles = userProfile.Roles;
                  for (const role of roles) {
                    if (userRoles.indexOf(role) > -1) {
                      // role found, canActivate = true
                      return true;
                    }
                  }
                  // no matching role, canActivate = false
                  return false;
                });
            }else{
              // no roles defined in route data, canActivate = false
              return Observable.of(false)
            }
          }
        }
      }
    );

}