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

101

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

그들 중 어느 것을 언제해야합니까?

angular 
— Yoav Schniederman
소스

답변:

101

canActivate 는 권한이없는 사용자가 특정 경로에 액세스하는 것을 방지하는 데 사용됩니다. 자세한 내용은 문서 를 참조하세요.

canLoad 는 사용자에게 권한이없는 경우 애플리케이션이 전체 모듈을 느리게로드하는 것을 방지하는 데 사용됩니다.

자세한 내용은 아래 문서 와 예제를 참조하세요.

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

이 코드를 사용하면 AdminModule의 코드는 AuthGuard가 true.

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

— 프레드릭 룬딘
소스
6
canActivate위의 시나리오에서 사용 하면 차이점은 무엇입니까?
— k11k2
3
canActive모듈이있는 @ k11k2가로 드됩니다 (F12> 소스-크롬). 당신은 there.With의 .js 파일을 볼 수 있습니다 canLoad이러한 모듈 (파일의 .js)가로드되지 않습니다 :)를 내가 더 잘 설명하는 위 내 대답 확인
— DiPix
23
관리자가 로그인하여 관리자 모듈을 통해로드 된 시나리오 canLoad는 true 를 반환 한 다음 응용 프로그램에서 로그 아웃합니다. 이제 관리자가 아닌 사용자가 동일한 브라우저에 로그인하면 어떻게 작동합니까? 로드 된 모듈이 캐시에서 제거되거나 제거 되었습니까?
— Keerthivasan
2
@Keerthivasan은 사용자가 로그 아웃하고 AdminModule을로드 할 충분한 권한이없는 다른 계정으로 다시 로그인 할 때 이전에로드 된 게으른 AdminModule 청크를 강제로 제거하지 않습니다. 그러나로드 된 캐시 된 모듈을 제외하고는 어쨌든 액세스 권한을 얻을 수 없습니다. 일반적으로 하나의 장치가 하나의 실제 사용자이기 때문에 이것이 진짜 보안 문제라고 생각하지 않습니다
— hastrb
1
@ sgClaudia98 둘 다 사용할 수 있지만 가드 실행에는 엄격한 순서가 있습니다. 이것이 제가 조금 전에 언급 한 내용과 관련하여 귀하의 경우에 차이가없는 이유입니다. 첫 번째 댓글에 매우 자세한 설명을 넣은 것 같습니다. 하나의 장치가 있고 관리자가 아닌 관리자가 요즘 하나씩 로그인하면 매우 이상한 경우입니다.
— hastrb
36
  • CanActivate- 경로를 활성화 할 수 있는지 여부를 결정합니다.이 가드는 사용자가 액세스 권한이 없음을 의미하는 false를 반환 하더라도이 가드는 항상 메모리에 모듈을로드하므로 지연로드 된 기능 모듈에 대한 최선의 방법이 아닐 수 있습니다. 경로.
  • CanLoad- 모듈을 느리게로드 할 수 있는지 여부를 결정하고 경로를로드 할 수 있는지 여부를 제어합니다. 이는 지연로드되는 기능 모듈에 유용합니다. 가드가 거짓을 반환해도로드되지 않습니다.

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

1. CanActivate 가드 테스트

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

지연로드 기능 모듈에서 CanActivate Guard 테스트

1. CanLoad 가드 테스트

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

지연로드 기능 모듈에서 CanLoad 가드 테스트

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

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

— 마흐무드 포지
소스
4
누군가를 혼동하지 않기 위해 .. 403은 Forbbiden, Unauthorized가 아닌 401입니다.
— hastrb
20

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

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

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

여기에 이미지 설명 입력

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

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

— DiPix
소스
3
내 네트워크 탭에서 지연 로딩 모듈에 대한 청크를 볼 수 없지만 예상대로 작동하는 경로는 요청시 모듈이로드되는지 여부를 어떻게 확인할 수 있습니까?
— k11k2
@ k11k2 모듈이 어떤 파일의 일부인지 확인하려면 debugger;해당 모듈의 구성 요소 중 하나에 대한 생성자에 명령문을 추가하십시오 . 그런 다음 별도의 청크로로드되었는지 또는 main과 같은 모듈에 포함되었는지 확인할 수 있습니다. 해당 모듈에 격리되지 않은 지연 모듈의 구성 요소에 대한 참조가있는 경우 어쨌든로드 될 수 있습니다. 이것이 보이면 JS 파일이 아닌 다른 것으로 필터링하거나 lazy 모듈을 공통 및 '진짜 게으른'부분으로 분리해야 함을 나타냅니다.
— Simon_Weaver
@ k11k2 "지연 로딩 모듈"이 느리게로드되지 않는 것 같습니다. loadChildren지연 모듈에 대한 경로의 일부로 속성을 사용했는지 확인하십시오 .
— hastrb
16

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

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

canActivate의 예 :

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

canLoad의 예 :

{ path: 'user' , canLoad: [AuthenticGuard], loadChildren : './user/user.module#UserModule' }
— 사가르 자다브
소스
미래의 리더를 들어, canActive 예는 게으른 것이 아니라 canLoad 인해 데 ..입니다 loadChildren. 더욱이, angular의 최신 버전은 ..loadChildren: () => import('./user/user.module').then(m => m.UserModule)
— hastrb
아주 간단한 설명, 좋아요 :)
— KTM
16

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 ]
        }
      ]
    }
— 모하마드 니아 즈 만드
소스
따라서 canLoad와 canActivate를 모두 사용해야합니까?
— Tarida George
0

허가되지 않은 사용자가 들어가면 canActivate 가 여전히 해당 모듈을로드합니다. 로드가 필요한지 판단 하려면 canLoad 가 필요합니다.

— LiHao
소스
0

canLoad 는 다른 사람이 소스 코드를 얻는 것을 막지 않는다는 점에 유의 하십시오. 사용자가 승인하지 않으면 .js는 브라우저에서 다운로드되지 않지만 브라우저 콘솔에서 import ( './ xxxxx.js')를 실행하여 수동으로 다운로드 할 수 있습니다.

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

— 이반 무리시
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.