小编Fre*_*ren的帖子

@ngrx/store 预加载保护捕获错误

我正在使用@ngrx/store 处理 Angular 防护,以检查状态是否已加载,并且我遇到了一个问题,即canActivate如果我使用过滤器,该方法永远不会返回。

以下是 GetCompanies 操作的示例效果:

return this.companiesService.getCompanies()
  .pipe(
    map(companies => new companiesActions.GetCompaniesSuccess(companies)),
    catchError(error => Observable.of(new companiesActions.GetCompaniesFail(error)))
  )
Run Code Online (Sandbox Code Playgroud)

如果出现错误,我将分派 GetCompaniesFail 操作并将用户重定向到/login页面。没关系,有趣的部分是守卫。

@Injectable()
export class CompaniesGuard implements CanActivate {
  constructor(
    private store: Store<AppState>,
    private router: Router
  ) {}

  canActivate(): Observable<boolean> {
    return this.checkStore()
      .pipe(
        switchMap(() => Observable.of(true)),
        catchError(() => Observable.of(false))
      );
  }

  checkStore(): Observable<boolean> {
    return this.store.select(getCompaniesLoaded)
      .pipe(
        tap(loaded => {
          if (!loaded) {
            this.store.dispatch(new companiesActions.GetCompanies());
          }
        }),
        filter(loaded => loaded),
        take(1)
      );
  }
}
Run Code Online (Sandbox Code Playgroud)

如果有错误并且loaded …

rxjs ngrx ngrx-effects angular ngrx-store-4.0

5
推荐指数
1
解决办法
665
查看次数

标签 统计

angular ×1

ngrx ×1

ngrx-effects ×1

ngrx-store-4.0 ×1

rxjs ×1