Angular 2+：canLoad用法

Question

我正在尝试将canLoad函数与路由一起使用，但似乎无法正常工作。

我不知道为什么，也许您不能将其与canActivate东西一起使用，但是由于我不知道，我以为有人会在这里。

该代码运行，当与aot编译一起使用时，我得到以下信息：

chunk {admin.module} admin.module.chunk.js, admin.module.chunk.js.map () 28 kB {main} {pilotage.module} {suiviprod.module}
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry]
chunk {main} main.bundle.js, main.bundle.js.map (main) 3.5 MB {vendor} [initial]
chunk {pilotage.module} pilotage.module.chunk.js, pilotage.module.chunk.js.map () 17.2 kB {admin.module} {main} {suiviprod.module}
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 267 kB {inline} [initial]
chunk {suiviprod.module} suiviprod.module.chunk.js, suiviprod.module.chunk.js.map () 20.4 kB {admin.module} {main} {pilotage.module}
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.52 MB [initial]

但是当我转到这些模块时，控制台日志并未完成。

这是我的路线代码：

logging.module （主路由，将其视为app.module）

export const loggedRoutes: Routes = [
  {
    path: 'logged', component: LoggedComponent, canActivate: [AuthGuardService], canActivateChild: [AuthGuardService], children: [
      { path: 'profile', component: ProfileComponent, children: [] },
      ...adminRoutes,
      ...mainRoutes,
      ...pilotageRoutes,
      ...suiviProdRoutes,
      { path: 'admin', loadChildren: 'app/logged/admin/admin.module#AdminModule', canLoad: [AdminGuardService] },
      { path: 'pilotage', loadChildren: 'app/logged/pilotage/pilotage.module#PilotageModule', canLoad: [AdminGuardService] },
      { path: 'suiviprod', loadChildren: 'app/logged/suiviprod/suiviprod.module#SuiviprodModule', canLoad: [AdminGuardService] },
      { path: '', redirectTo: '/logged/main/error', pathMatch: 'prefix' }
    ]
  },
];

admin.module （suiviprod和领航相同，只是路线和组件不同）

export const adminRoutes: Routes = [
  {
    path: 'admin', component: AdminComponent, canActivate: [AdminGuardService], canActivateChild: [AdminGuardService], children: [
      { path: 'validation', component: ValidationComponent, children: [] },
      { path: 'dashboard', component: DashboardComponent, children: [] },
      { path: 'user/:id', component: UserComponent, children: [] },
      { path: 'users', component: UsersComponent, children: [] },
      { path: 'params', component: ParamsComponent, children: [] },
      { path: 'journals', component: JournalsComponent, children: [] },
      { path: 'purge', component: PurgeComponent, children: [] },
      { path: 'groups', component: GroupsComponent, children: [] },
      { path: 'configs', component: ConfigurationComponent, children: [] },
      { path: 'applications', component: ApplicationsComponent, children: [] },
      { path: '', redirectTo: '/logged/admin/dashboard', pathMatch: 'prefix' }
    ]
  },
];

authguard.service （如果本地存储具有令牌，canActivate返回true）

@Injectable()
export class AdminGuardService implements CanActivate, CanActivateChild, CanLoad {
  jwtHelper: JwtHelper = new JwtHelper();
  constructor(private router: Router, private alerter: AlertService) { }
  // tslint:disable-next-line:max-line-length
  canActivate(route?: ActivatedRouteSnapshot, state?: RouterStateSnapshot): boolean { return canActivate(route, state, this, [global.roles.admin]); }
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return this.canActivate(route, state); }
  canLoad(route: Route): boolean { console.log('coucou'); return canActivate(null, null, this, [global.roles.admin]); }
}

编辑后卫使用的canActivate函数（对canActivate和canActivateChild效果很好）：

export function canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot, caller: any, userRoles: string[]): boolean {
  try {
    // Get the token
    let token = localStorage.getItem('jwt');

    // If no token found, not connected
    if (!token) {
      caller.alerter.error(`Vous n'êtes pas connecté`);
      caller.router.navigate(['/login']);
      return false;
    }

    // Try to get roles. If it fails, not a valid token.
    let decodedToken = caller.jwtHelper.decodeToken(token);
    let roles: Array<String> = decodedToken.roles.split(',');

    // return true if any role is found
    let found = false;
    for (let role of userRoles) {
      if (roles.indexOf(role) >= 0) { found = true; }
    }
    if (found) { return true; }

    // Role not found => Unauthorized
    caller.alerter.error(`Autorisation manquante`);
    caller.router.navigate(['/logged/main']);
    return false;

  } catch (ex) {
    // Catch the JWT errors
    caller.alerter.error(`La session utilisateur est corrompue`);
    caller.router.navigate(['/login']);
    return false;
  }
}

Answer 1

您不想在主loggedRoutes常量中定义延迟加载的模块的子路由。 您应该只定义模块的入口点，然后让模块处理其内部路由。 通过在loggedRoutes定义模块的子路由，您实际上已经声明它们是根应用程序模块的一部分。

canLoad仅适用于延迟加载的模块-这些模块必须控制自己的路由。 根模块无法控制此操作，因为它可以知道延迟加载的模块的组件，并且不会被延迟加载。

从您的loggedRoutes删除它：

...adminRoutes,
...pilotageRoutes,
...suiviProdRoutes,

...mainRoutes很好，因为它不是延迟加载的模块的一部分。

并确保您的延迟加载模块已注册其路由：

@NgModule({
  imports: [ RouterModule.forChild(adminRoutes) ]
})
export class AdminModule { }

延迟加载的模块希望内部处理它们自己的路由，因为您正在顶层注册所有路由，而您的应用程序并不关心延迟加载的模块，它会看到您的管理路由并在那里导航，因为这只是一条正常路由。 但是，AOT编译器会看到您的loadChildren ，它将为您分块代码，但是包含应用程序的主块还将包含所有应该延迟加载的额外模块。

您还应该从adminRoutes删除第一个路由的名称：

path: 'admin', component: AdminComponent...

应该成为

path: '', component: AdminComponent...

您的模块已经在主loggedRoutes注册为admin ，因此已经提供了路由段admin 。

Answer 2

您的canActivate可能有问题。 这是方法主体：

return canActivate(route, state, this, [global.roles.admin]);

它正在调用另一个名为canActivate函数。 那是什么？