canLoad과 의 차이점은 무엇입니까 canActivate?
export interface Route {
path?: string;
pathMatch?: string;
matcher?: UrlMatcher;
component?: Type<any>;
redirectTo?: string;
outlet?: string;
canActivate?: any[];
canActivateChild?: any[];
canDeactivate?: any[];
canLoad?: any[];
data?: Data;
resolve?: ResolveData;
children?: Routes;
loadChildren?: LoadChildren;
}
그들 중 어느 것을 언제해야합니까?
답변
canActivate 는 권한이없는 사용자가 특정 경로에 액세스하는 것을 방지하는 데 사용됩니다. 자세한 내용은 문서 를 참조하세요.
canLoad 는 사용자에게 권한이없는 경우 애플리케이션이 전체 모듈을 느리게로드하는 것을 방지하는 데 사용됩니다.
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
이 코드를 사용하면 AdminModule의 코드는 AuthGuard가 true.
사용자가이 경로에 액세스 할 권한이없고 canActivate가드 만 사용 AdminModule했다면 사용자가 해당 경로에 액세스 할 수 없더라도가로드됩니다.
답변
- CanActivate- 경로를 활성화 할 수 있는지 여부를 결정합니다.이 가드는 사용자가 액세스 권한이 없음을 의미하는 false를 반환 하더라도이 가드는 항상 메모리에 모듈을로드하므로 지연로드 된 기능 모듈에 대한 최선의 방법이 아닐 수 있습니다. 경로.
- CanLoad- 모듈을 느리게로드 할 수 있는지 여부를 결정하고 경로를로드 할 수 있는지 여부를 제어합니다. 이는 지연로드되는 기능 모듈에 유용합니다. 가드가 거짓을 반환해도로드되지 않습니다.
이것은 지연로드 된 기능 모듈을 사용하여 두 가드에서 수행 한 테스트입니다.
1. CanActivate 가드 테스트
네트워크 페이지 하단에 전송 된 9.5MB 크기의 요청이 3.34 초 만에 완료되고 3.47 초 만에 완전히로드되었음을 알 수 있습니다.
1. CanLoad 가드 테스트
여기에서는 브라우저가 2.64 초에 전송 된 9.2MB 크기의 요청을 18 개만 수행하고 2.59 초에 완전히로드 된 상태에서 CanLoad Guard를 사용했을 때 큰 차이를 볼 수 있습니다.
CanLoad Guard는 사용자가 인증되지 않은 경우 모듈 데이터를로드하지 않으며로드 시간이 거의 1 초 감소하고 웹 페이지를로드하는 데 엄청난 시간이 걸리므로 더 많은 성능을 제공합니다. 의심 할 여지없이 모듈 크기에 따라 다릅니다.
팁 : 프로젝트에서 테스트를
Disable Cache하려면 네트워크 탭의 확인란 이 선택되어 있는지 확인하세요 . 첫 번째 이미지에 표시되어 있습니다.
답변
다른 게시물의 댓글에 대한 질문에 대해
“위 시나리오에서 canActivate를 사용하면 차이점은 무엇입니까?”
실제로 사용자에게는 차이가 없으며 두 경우 모두 페이지에 액세스 할 수 없습니다. 숨겨진 차이점 이 하나 있습니다 . F12 키를 누르고 다운로드 파일이있는 소스 (Chrome)로 이동하면. 그러면 코드가 있는 canActive 파일 ( chunk.js ) 이 다운로드 된 경우를 확인할 수 있습니다 . 페이지에 대한 액세스 권한이 없더라도.
그러나 canLoad의 경우 소스 코드 가있는 chunk.js 파일 이 없습니다 .
보시다시피 이것은 보안에 큰 영향을 미칩니다.
물론 canLoad 는 LazyLoaded Modules 에만 사용할 수 있다는 것을 잊지 마십시오 .
답변
canActivate 는 권한이없는 사용자를 방지하는 데 사용됩니다.
canLoad 는 앱의 전체 모듈을 방지하는 데 사용됩니다.
canActivate의 예 :
{ path: 'product',canActivate:[RouteGaurd], component : ProductComponent }
canLoad의 예 :
{ path: 'user' , canLoad: [AuthenticGuard], loadChildren : './user/user.module#UserModule' }
답변
CanLoad 가드는 게으른로드 모듈의 로딩을 방지 할 수 있습니다. 우리는 일반적으로 권한이없는 사용자가 모듈의 경로를 탐색하고 중지 한 다음 모듈의 소스 코드를 보는 것을 원하지 않을 때이 가드를 사용합니다.
Angular는 권한없는 사용자가 경로에 액세스하는 것을 방지 하는 canActivate Guard를 제공 합니다. 그러나 모듈이 다운로드되는 것을 막지는 않습니다. 사용자는 Chrome 개발자 콘솔을 사용하여 소스 코드를 볼 수 있습니다. CanLoad Guard는 모듈이 다운로드되는 것을 방지합니다.
실제로 CanLoad 는로드 할 모듈을 보호하지만 일단 모듈이로드되면 CanLoad 가드는 아무 작업도 수행하지 않습니다. 인증되지 않은 사용자를 위해 CanLoad 가드를 사용하여 모듈 로딩을 보호했다고 가정 합니다. 사용자가 로그인하면 해당 모듈을로드 할 수 있으며 해당 모듈에 의해 구성된 하위 경로를 탐색 할 수 있습니다. 그러나 사용자가 로그 아웃하면 모듈이 이미로드 되었기 때문에 여전히 사용자는 해당 하위 경로를 탐색 할 수 있습니다. 이 경우 권한이없는 사용자로부터 어린이 경로를 보호하려면 CanActivate guard 도 사용해야합니다 .
AdminModule을로드하기 전에 CanLoad 를 사용하십시오 .
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [ AuthGuardService ]
},
AdminModule을로드 한 후 AdminRouting 모듈에서 CanActive를 사용 하여 다음과 같은 권한이없는 사용자로부터 자녀 를 보호 할 수 있습니다 .
{
path: '',
component: AdminComponent,
children: [
{
path: 'person-list',
component: PersonListComponent,
canActivate: [ AuthGuardService ]
}
]
}
답변
허가되지 않은 사용자가 들어가면 canActivate 가 여전히 해당 모듈을로드합니다. 로드가 필요한지 판단 하려면 canLoad 가 필요합니다.
답변
canLoad 는 다른 사람이 소스 코드를 얻는 것을 막지 않는다는 점에 유의 하십시오. 사용자가 승인하지 않으면 .js는 브라우저에서 다운로드되지 않지만 브라우저 콘솔에서 import ( ‘./ xxxxx.js’)를 실행하여 수동으로 다운로드 할 수 있습니다.
모듈 이름은 경로 정의의 main.js에서 쉽게 찾을 수 있습니다.
