각도 2+ : canLoad 사용법

Question

경로와 함께 canLoad 함수를 사용하려고하는데 작동하지 않는 것 같습니다.

나는 왜 모르겠다. 어쩌면 너는 canActivate이나 그걸로 사용할 수 없지만, 모르겠다. 나는 누군가가 여기 있다고 생각했다.

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] 

을하지만 모듈에 갈 때, 콘솔 로그는 수행되지 않습니다 AOT 컴파일 함께 봉사 할 때 코드가 실행

나는이 얻을.

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 및 도선이 있습니다 : 여기

내 경로의 코드 동일하지만 다른 경로로만)

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' } 
    ] 
    }, 
]; 

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

: ( canActivate 및 canActivateChild 잘 작동) 가드에 의해 사용

@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 기능, 0 authguard.service는 (로컬 스토리지 토큰이있는 경우 canActivate는 true를 반환)

Answer 1

메인 loggedRoutes const에 게으른로드 모듈의 하위 경로를 정의하고 싶지 않습니다. 모듈에 진입 점을 정의한 다음 모듈이 내부 라우팅을 처리하도록해야합니다. 모듈의 하위 경로를 loggedRoutes에 정의하면 실제로는 해당 모듈이 루트 앱 모듈의 일부라고 선언했습니다.

canLoad은 지연로드 모듈에만 사용되며 모듈은 자체 라우팅을 제어해야합니다. 루트 모듈은 게으른로드 된 모듈의 구성 요소에 대해 알 것이며 게으르게로드되지 않기 때문에이를 제어 할 수 없습니다. 당신의 loggedRoutes에서

제거이 : 그것은 게으른로드 모듈의 일부가 아닌 것처럼

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

...mainRoutes이 괜찮습니다.

및 확인 당신의 게으른로드 된 모듈은 노선 등록 :

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

게으른로드 된 모듈을 사용하면 최상위 수준에 모든 경로를 등록하고 같은 앱이 상관하지 않는다, 내부적으로 자신의 라우팅을 처리 할 게으른로드 된 모듈에 대해서는 관리 경로를보고 정상 경로이기 때문에 탐색 할 수 있습니다. 그러나 AOT 컴파일러는 loadChildren을 볼 것이고, 코드를 청크로 채우지 만, 앱을 포함하는 메인 덩어리는 또한 게으른 로딩되어야하는 모든 추가 모듈을 포함하게됩니다.

당신은 또한 당신의 adminRoutes에서 첫 번째 경로의 이름을 드롭해야합니다

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

는 경로 세그먼트 admin이 이미 모듈이있는 admin로 등록되고에서 제공

path: '', component: AdminComponent... 

될해야 주 loggedRoutes.

Answer 2

canActivate에 문제가있을 수 있습니다. 다음은 메서드 본문입니다.

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

canActivate이라는 다른 함수가 호출됩니다. 그게 뭐야?