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]

但是当我去模块时，控制台日志还没有完成。

以下是我的路线代码：

logged.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和pilotage是相同的，只是有不同的路线和组件）

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 const中定义延迟加载模块的子路径。您应该只定义模块的入口点，然后让模块处理其内部路由。通过在loggedRoutes中定义模块的子路径，您实际上已声明它们是您的根的一部分应用模块。

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

从loggedRoutes

中删除此内容

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

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

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

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

延迟加载的模块想要在内部处理自己的路由，因为您在顶级注册所有路由，您的应用程序不关心延迟加载的模块，它会看到您的管理路由并导航到那里，因为它只是正常的路线。然而，AOT编译器会看到你的loadChildren，它会为你填充你的代码，但是包含你的app的主块也将包含所有应该延迟加载的额外模块。

您还应该从adminRoutes

中删除第一条路线的名称

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

应该成为

path: '', component: AdminComponent...

您的模块已在主admin中注册为admin，提供路段loggedRoutes。

Answer 2

您的canActivate可能存在问题。这是方法体：

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

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

Angular 2+：canLoad用法

2 个答案: