Question

如果用户使用书签或通过手动输入URL直接访问某些路由，则尝试停止访问这些路由。路由是一组按特定顺序链接的路由。例如，像向导一样。

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

将没有延迟加载的TestComponent放入AppRoutingModule或使用顶级not-found路由是可行的，但是MainModule中绝对没有路由是可行的。因此，这似乎与包含延迟加载模块的延迟加载模块有关。

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

我不确定为什么要以这种方式设置应用程序，因此在最坏的情况下，我将尝试推动快速重构并简化功能模块的延迟加载。

可以激活

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路由器订阅的可观察区域内执行路由更改。

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;
}

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

1 个答案: