Angular의 canLoad와 canActivated의 차이는 무엇입니까?

Angular의 canLoad와 canActivated의 차이는 무엇입니까?

사이의 차이점은 무엇입니까?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가 반환하는 경우에만 관리 모듈의 코드가 응용 프로그램에 로드됩니다.true.

사용자가 이 경로에 액세스할 수 있는 권한이 없고 사용자가 사용한 경로만canActivate 비원兵, 그경,AdminModule사용자가 해당 경로에 액세스할 수 없는 경우에도 로드됩니다.

• 활성화할 수 있음 - 경로를 활성화할 수 있는지 여부를 결정합니다. 이 가드는 항상 모듈을 메모리에 로드하기 때문에 사용자가 경로에 액세스할 수 없는 경우에도 이 가드가 모듈을 로드하기 때문에 이 가드가 최적의 방법이 아닐 수 있습니다.
• CanLoad - 모듈을 느리게 로드할 수 있는지 여부를 결정하고 경로를 로드할 수 있는지 여부를 제어합니다.이 기능은 로드가 느린 피쳐 모듈에 유용합니다.경비원이 거짓으로 돌아오면 장전도 안 해요

다음은 기능 모듈이 느리게 로드된 두 가드에 대해 수행한 테스트입니다.

가드 테스트 활성화 가능

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

캔 로드 가드 테스트

여기서 CanLoad Guard를 사용했을 때 브라우저가 9.2MB 크기의 18개의 요청만 수행했을 때 2.64초 만에 전송 완료되고 2.59초 만에 완전히 로딩되었을 때의 큰 차이를 알 수 있습니다.

사용자가 승인하지 않은 경우 CanLoad Guard는 모듈 데이터를 로드하지 않으며 로드 시간이 거의 1초 감소하고 웹 페이지 로드에 많은 시간이 소요되므로 모듈 크기에 따라 달라질 수 있습니다.

팁: 만약 당신이 당신의 프로젝트에 대한 테스트를 하고 싶다면, 그것을 확실히 하라.Disable Cache 첫 번째 에 표시되어 .

CanLoad Guard는 Lazy Loaded 모듈의 로드를 방지합니다.우리는 일반적으로 무단 사용자가 모듈의 경로를 탐색하고 모듈의 소스 코드를 확인하는 것을 원하지 않을 때 이 가드를 사용합니다.

Angular는 권한 없는 사용자가 경로에 액세스하지 못하도록 하는 canActivate Guard를 제공합니다.그러나 모듈이 다운로드되는 것을 막지는 않습니다.사용자는 크롬 개발자 콘솔을 사용하여 소스 코드를 볼 수 있습니다.CanLoad Guard는 모듈이 다운로드되는 것을 방지합니다.

실제로 CanLoad는 로드할 모듈을 보호하지만 모듈이 로드되면 CanLoad 가드는 아무것도 하지 않습니다.인증되지 않은 사용자에 대해 CanLoad 가드를 사용하여 모듈 로드를 보호했다고 가정합니다.사용자가 로그인하면 해당 모듈을 로드할 수 있으며 해당 모듈에 의해 구성된 하위 경로를 탐색할 수 있습니다.그러나 사용자가 로그아웃한 경우 모듈이 이미 로드되었기 때문에 여전히 사용자는 이러한 하위 경로를 탐색할 수 있습니다.이 경우 무단 사용자로부터 어린이 경로를 보호하려면 CanActivate 가드도 사용해야 합니다.

관리 모듈을 로드하기 전에 CanLoad 사용:

  {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
        canLoad: [ AuthGuardService ]
      },

AdminModule을 로드한 후 AdminRouting 모듈에서 CanActivate를 사용하여 다음과 같은 무단 사용자로부터 어린이를 보호할 수 있습니다.

{ 
      path: '',
      component: AdminComponent,
      children: [ 
        {
          path: 'person-list',
          component: PersonListComponent,
          canActivate: [ AuthGuardService ]
        }
      ]
    }  

"위의 시나리오에서 활성화할 수 있다면 어떤 차이가 있습니까?"라는 다른 게시물의 댓글과 관련하여

실제로 사용자의 경우 차이가 없을 것이며, 두 경우 모두 페이지에 액세스할 수 없습니다.하지만 한 가지 숨겨진 차이점이 있습니다.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 및 canActivee를 게으른 경로로 사용하면서 발견한 사례입니다.

canLoad 또는 canActivate가 사용되는 경우:

모듈이 아직 다운로드되지 않은 경우:

canLoad: 
  true: module will be downloaded
  false: module will not be downloaded

canActivate:
  true: module will be downloaded and user will be granted to access particular route
  false: module will be downloaded and user will be prevented to access particular route

모듈이 이미 다운로드된 경우

canLoad: It does not do anything. Like its not there in code.

canActivate:
  true: user will be granted to access particular route
  false: user will be prevented to access particular route

canLoad 및 canActivate가 모두 사용되는 경우:

모듈이 아직 다운로드되지 않은 경우:

canLoad: 
  true: module will be downloaded and passed control to check canActivate
  false: Neither module will be downloaded nor canActivate will be called

canActivate:
  true: user will be granted to access particular route
  false: user will be prevented to access particular route

모듈이 이미 다운로드된 경우

canLoad:
  It does not do anything. Like its not there.

canActivate:
  true: user will be granted to access particular route
  false: user will be prevented to access particular route

그래서 저는 canLoad와 canActivate를 둘 다 사용하는 것을 선호합니다. 게으른 모듈의 경우에는 활성화하고 구성 요소 기반 경로의 경우에는 활성화할 수 있습니다.

canLoad가 다른 사용자가 소스 코드를 가져오는 것을 막지 못한다는 점에 유의해야 합니다..js는 사용자가 인증되지 않은 한 브라우저에서 다운로드되지 않지만 브라우저 콘솔에서 가져오기(./xxxx.js')를 실행하여 수동으로 다운로드할 수 있습니다.

모듈 이름은 경로 정의의 main.js에서 쉽게 찾을 수 있습니다.

여기서 아무도 언급하지 않은 큰 차이점은 canLoad는 다음과만 작동한다는 것입니다.loadChildren.

를 방지하기 위해component로드 중인 경우에만canActivate트리거됩니다.

자세한 내용은 경로 가드가 부팅이 아니라 로드할 수 있는 이유를 참조하십시오.

can 활성화 권한 없는 사용자가 해당 모듈에 여전히 로드를 입력하면 canLoad가 필요합니다. 로드 여부를 판단하려면 canLoad가 필요합니다.

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