Angular의 canLoad와 canActivate의 차이점은 무엇입니까?

Angular의 canLoad와 canActivate의 차이점은 무엇입니까?

---

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

이 코드를 사용하면 AuthGuard가를 반환하는 경우에만 AdminModule에 대한 코드가 애플리케이션에로드됩니다 true.

사용자가이 경로에 액세스 할 권한이없고 canActivate가드 만 사용 AdminModule했다면 사용자가 해당 경로에 액세스 할 수 없더라도가로드됩니다.

---

다른 게시물의 의견에 대한 질문에 대해 "위 시나리오에서 canActivate를 사용하면 차이점은 무엇입니까?"

실제로 사용자에게는 차이가 없으며 두 경우 모두 페이지에 액세스 할 수 없습니다. 숨겨진 차이점 이 하나 있습니다 . F12 키를 누르고 다운로드 파일이있는 소스 (Chrome)로 이동하면. 그러면 코드가 있는 canActive 파일 ( chunk.js ) 이 다운로드 된 경우를 확인할 수 있습니다 . 페이지에 대한 액세스 권한이 없더라도.

그러나 canLoad의 경우 소스 코드 가있는 chunk.js 파일 이 없습니다 .

보시다시피 이것은 보안에 정말 큰 영향을 미칩니다.

물론 canLoad 는 LazyLoaded Modules 에만 사용할 수 있다는 것을 잊지 마십시오 .

---

• CanActivate- 경로를 활성화 할 수 있는지 여부를 결정합니다.이 가드는 사용자가 액세스 권한이 없음을 의미하는 false를 반환 하더라도이 가드는 항상 메모리에 모듈을로드하므로 지연로드 된 기능 모듈에 대한 최선의 방법이 아닐 수 있습니다. 경로.
• CanLoad- 모듈을 느리게로드 할 수 있는지 여부를 결정하고 경로를로드 할 수 있는지 여부를 제어합니다. 이는 지연로드되는 기능 모듈에 유용합니다. 가드가 거짓을 반환해도로드되지 않습니다.

이것은 지연로드 된 기능 모듈을 사용하여 두 가드에서 수행 한 테스트입니다.

1. CanActivate 가드 테스트

네트워크 페이지 하단에 전송 된 9.5MB 크기의 요청이 3.34 초 만에 완료되고 3.47 초 만에 완전히로드되었음을 알 수 있습니다.

1. CanLoad 가드 테스트

여기서는 브라우저가 2.64 초에 전송 된 9.2MB 크기와 2.59 초에 완전히로드 된 18 개의 요청 만 수행했기 때문에 CanLoad Guard를 사용했을 때 큰 차이를 볼 수 있습니다.

CanLoad Guard는 사용자가 승인되지 않은 경우 모듈 데이터를로드하지 않으며로드 시간이 거의 1 초 감소하고 웹 페이지를로드하는 데 엄청난 시간이 걸리므로 더 많은 성능을 제공합니다. 의심 할 여지없이 모듈 크기에 따라 다릅니다.

팁 : 프로젝트에서 테스트를 Disable Cache하려면 네트워크 탭의 확인란 이 선택되어 있는지 확인하십시오 . 첫 번째 이미지에 표시되어 있습니다.

---

canActivate 는 권한이없는 사용자를 방지하는 데 사용됩니다.

canLoad 는 앱의 전체 모듈을 방지하는 데 사용됩니다.

canActivate의 예 :

{ path: 'product',canActivate:[RouteGaurd], component : ProductComponent }

canLoad의 예 :

{ path: 'user' , canLoad: [AuthenticGuard], loadChildren : './user/user.module#UserModule' }

참조 URL : https://stackoverflow.com/questions/42026045/difference-between-angulars-canload-and-canactivate