0

我正在尝试将该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]

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

这是我的路线代码：

logs.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功能（适用于canActivateand 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;
  }
}
4

2 回答 2

2

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

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

从你的删除这个loggedRoutes：

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

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

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

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

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

您还应该从您的 : 中删除第一条路线的名称adminRoutes：

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

应该成为

path: '', component: AdminComponent...

路由段admin已由您的模块提供，该模块admin在 main中注册loggedRoutes。

于 2017-11-09T12:29:19.173 回答
0

您的canActivate. 这是方法体：

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

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

于 2017-11-07T11:53:32.943 回答