Question

我已将 canLoad 防护添加到延迟加载的状态。我遇到的问题是，如果使用router.navigate（）从不同的状态初始化状态，则无法获取任何路由参数。

所以这是我的路线配置：

path: 'programs/:programId/dashboard',
loadChildren: './program.module#ProgramModule',
canLoad: [ProgramGuard]

这是ProgramGuard的简短版本：

export class ProgramGuard implements CanLoad {

  canLoad(route: Route): Observable<boolean> {

    //route object doesn't have any reference to the route params

    let programId = paramFromRoute;

    return Observable.create(observer => {

       if (programId == authorizedProgramId)
        observer.complete(true);
       else
        observer.complete(false);
    }
  }
}

我尝试过注入ActivatedRoute试图让它们从那里得到它，但没有。

如果用户在浏览器中键入URL，则没有问题，因为我可以从位置对象中提取参数。但是当使用route.navigate时，浏览器的位置仍然设置为先前的状态。

非常感谢任何帮助或想法。

Answer 1

我尝试做类似的事情，最后转而改为canActivate后卫。另请注意，canLoad防护可以阻止您可能想要执行的任何预加载。

理论上，如果用户无法访问路由，那么即使不加载它也会很棒。但它的实践似乎太有限了，无法做出决定。

你可以尝试的东西（我在尝试这样做时没有想到它）...你可以添加一个父路线（无组件），它有一个可以检查参数的canActivate防护。然后，如果用户具有授权，则路由到延迟加载的路由。

Answer 2

我能够使用Location对象检索包含路径参数的路径。

canLoad() {
   //dont even load the module if not logged in
   if (!this.userSessionService.isSessionValid()) {
     this.userSessionService.redirectUrl = this.location.path();
     this.router.navigate(['/auth']);
     return false;
   }
   return true;
}

您只需要在构造函数中注入Location对象。

Answer 3

首先，您可以声明变量，如下所示：

routeSnapshot: ActivatedRouteSnapshot;

然后在构造函数中调用ActivatedRouteSnapshot类，如下所示：

constructor(routeSnapshot: ActivatedRouteSnapshot)

，然后将值设置为变量：

constructor(routeSnapshot: ActivatedRouteSnapshot) {
    this.routeSnapshot = routeSnapshot;
  }

现在您可以将this.routeSnapshot用作canLoad方法

Answer 4

我知道为时已晚，但是我找到了像魅力一样有效的解决方案。我希望这将帮助像我一样面临同样问题的新成员

  canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    if (!this.auth.isLoggedIn()) {
      this.route.navigate(['auth/login'], { queryParams: { redirect_url: '/' + segments[0].path } });
      return false;
    }
    return true;
  }

Answer 5

为什么不从段路径构建网址？

/**
 * Test if the user as enough rights to load the module
 */
canLoad(route: Route, segments: UrlSegment[]): boolean | Observable<boolean> | Promise<boolean> {
    // We build the url with every path of the segments
    const url = segments.map(s => s.path).join('/')

    // We handle the navigation here 
    return this.handleNavigation(url, route)
}

Angular 2：如何从CanLoad实现获取路由参数？

5 个答案: