由于延迟加载模块而无法手动输入URL时，CanActivate Guard的角度路由

Question

如果用户使用书签直接访问它们，或者手动输入URL，则尝试停止访问几条路径。 路由是按特定顺序的一组链接路由。 例如，像向导一样。

在过去，我没有使用canActivate和使用服务的任何问题，如果它没有指示先前路由状态被访问的正确数据（即第2页之前的第1页等），它将路由用户初始路由（第1页），但在使用enableTracing并对几个快速生成的组件进行测试之后，似乎应用程序正在加载并访问阻止访问路由的CanActivate防护，即调用this.router.navigate(['/example/route/path']); 如果直接访问第2页或更多页面，它似乎不会到达目的地（第1页）。

将未延迟加载的TestComponent放入AppRoutingModule或使用顶级not-found路由可以正常工作，但MainModule任何内容都not-found路由。 所以它似乎可能与包含延迟加载模块的延迟加载模块有关。

有人找到了解决方法吗？ 或者这只是与Angular中的延迟加载相关的另一个问题，如entryComponents - https://stackoverflow.com/a/51689994/1148107 。

我不确定为什么应用程序是这样设置的，所以最糟糕的情况我会尝试推动快速重构并压缩功能模块的延迟加载。

CanActivate

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  if (this.storeService.hasAccess) {
    return true;
  }

  this.router.navigate(['/store/page/1']); // Doesn't route to page 1
  return false;
}

AppRoutingModule路由

const routes: Routes = [
  {
    path: '',
    loadChildren: './main/main.module#MainModule',
    canActivate: [AuthGuard]
  },
  // ...
  {
    path: 'not-found',
    loadChildren: './not-found/not-found.module#NotFoundModule'
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }
];

MainRoutingModule路由

const routes: Routes = [
  {
    path: '', component: MainComponent,
    children: [
      {
        path: '',
        redirectTo: 'store',
        pathMatch: 'full'
      },
      {
        path: 'store',
        loadChildren: './store/store.module#StoreModule'
      },
      // ...
    ]
  }
];

StoreRoutingModule

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'page/1',
        component: Page1Component,
        data: {
          title: 'Store'
        }
      },
      {
        path: 'page/2',
        component: Page2Component,
        // Redirects to a blank page instead of page 1 when directly 
        // accessed by a browser bookmark
        canActivate: [CanActivateStoreGuard], 
        data: {
          title: 'Store'
        }
      },
      // ...
    ]
  }
];

Answer 1

您需要在Angular路由器订阅的observable中执行路由更改。

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
   return new Observable((subscriber) => {
       if (this.storeService.hasAccess) {
          subscriber.next(true);
       } else {
          this.router.navigate(['/store/page/1']);
          subscriber.next(false);
       }
       subscriber.complete();
   });
} 

我无法验证这是否可以解决您的问题，但我记得遇到过这个问题。 当我看着我的守卫时，这就是我所做的。

更新：

如果以上不起作用（我有疑问），那么你可以尝试在setTimeout包装路由更改。

canActivate(next: ActivatedRouteSnapshot,  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
 if (this.storeService.hasAccess) {
    return true;
 }

 window.setTimeout(()=> this.router.navigate(['/store/page/1']));

 return false;
}