时间戳

首页 > 解决方案 > 路由守卫方法破坏路由

angular - 路由守卫方法破坏路由

问题描述

编辑：StackBlitz 最小复制似乎可以工作，所以似乎还有其他问题..

角 6.1.3

我有一条需要根据 param 保护的路线slug。

{
  path: 'market/:slug',
  component: MarketComponent,
  canActivate: [RoleGuard],
},

角色保护canActivate方法：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  const market$ = this.marketService.getBySlug(
    route.paramMap.get('slug')
  ); // returns an observable of the corresponding market object

  // Verify the user is authorized to see this market.
  return this.authService.isAuthorized(market);
}

authService.is授权：

isAuthorized(market: Observable<Market>): Observable<boolean> {
  return combineLatest(this.user$, market).pipe(
    map(([user, market]) => {
      // Check roles of the user based on the market's configuration
      return true;
    })
  );
}

我已经删除了用户/市场逻辑，只是试图去除任何可能导致问题的东西，但是当我canActivate在路由停止内返回上述方法时。路线追踪：

Router Event: NavigationStart
NavigationStart(id: 2, url: '/market/sams-corner-store')
NavigationStart {id: 2, url: "/market/sams-corner-store", navigationTrigger: "imperative", restoredState: null}

Router Event: RoutesRecognized
RoutesRecognized(id: 2, url: '/market/sams-corner-store', urlAfterRedirects: '/market/sams-corner-store', state: Route(url:'', path:'') { Route(url:'market/sams-corner-store', path:'market/:slug') } )
RoutesRecognized {id: 2, url: "/market/sams-corner-store", urlAfterRedirects: "/market/sams-corner-store", state: RouterStateSnapshot}

Router Event: GuardsCheckStart
GuardsCheckStart(id: 2, url: '/market/sams-corner-store', urlAfterRedirects: '/market/sams-corner-store', state: Route(url:'', path:'') { Route(url:'market/sams-corner-store', path:'market/:slug') } )
GuardsCheckStart {id: 2, url: "/market/sams-corner-store", urlAfterRedirects: "/market/sams-corner-store", state: RouterStateSnapshot}

Router Event: ChildActivationStart
ChildActivationStart(path: '')
ChildActivationStart {snapshot: ActivatedRouteSnapshot}

Router Event: ActivationStart
ActivationStart(path: 'market/:slug')
ActivationStart {snapshot: ActivatedRouteSnapshot}

在正常路由期间，会触发更多路由器事件，但在这里它只是停止。我认为这与isAuthorized不发射任何东西有关，但我很难过。失败后，导航到任何地方都无济于事；URL 保持不变，并且没有其他任何内容记录到控制台。

有时甚至没有调用该方法，也没有在combineLatest/中调用 console.log withLatestFrom。

我已经尝试过combineLatest并且withLatestFrom使用一些运算符变体无济于事。

标签： angularrxjsangular2-routing

解决方案

canActivate 守卫将订阅返回的 Observable 并等待该 Observable 完成，直到那一刻不会处理其他路由器事件。
将first()（Rx 运算符）添加到 user$ 和 market$ Observable。
PS 代替combineLatest使用forkJoin.

推荐阅读