angular - 防止组件在守卫完成之前加载

Question

我想知道是否有办法在守卫完成之前阻止组件加载？

问题

我的组件在守卫检索有关用户的相关信息之前加载，因此加载检查失败。

我目前的设置如下:

应用路由模块

{
    path: 'sub', component: MasterComponent, canActivateChild: [AuthGuard],
    children: [
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent }    
    ]
  },

AuthGuard - canActivateChild 方法

canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {

    return this.secService.isAuthorized()
      .map((profilePresent: boolean) => {
        if (!profilePresent) {
          this.secService.getProfile().subscribe(
            (data: any) => {
              sessionStorage.setItem('profile', JSON.stringify(data));

              return false;
            }
          );

          return true;
        }

        this.secService.redirectToAuthorization();
        return false;
      });
  }

在我的 Dashboard.component.ts 中:

ngOnInit() {
var name = JSON.parse(sessionStorage.getItem('profile')).name;

console.info(name);
}

这一切都会在控制台上引发错误:

ERROR TypeError: Cannot read property 'name' of null

跟踪它我注意到守卫在组件加载之前没有完成因此错误(它当时不存在)。

关于如何管理这个的任何想法

Answer 1

因此，如果我理解正确的话，您需要从 canActivateChild 返回的 Observable 在您从 this.secService.getProfile() 检索数据后完成。

您只需要重组您的 Observable 链，而不是进行嵌套订阅:

return this.secService.isAuthorized()
  .concatMap((profilePresent: boolean) => {
    if (!profilePresent) {
      return this.secService.getProfile()
        .do(data => sessionStorage.setItem('profile', JSON.stringify(data))
        .mapTo(true); // I'm not sure what you really need to do here
    }

    this.secService.redirectToAuthorization()
    return Observable.of(false);
  });

请注意，您不能从 subscribe 调用中返回值，所以我不知道您到底想做什么，但我希望您能明白这一点。