AngularのcanLoadとcanActivateの違いは？

100

違いは何である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
ソース

回答:

99

canActivateは、許可されていないユーザーが特定のルートにアクセスするのを防ぐために使用されます。詳細については、ドキュメントを参照してください。

canLoadは、ユーザーが許可されていない場合に、アプリケーションがモジュール全体を遅延ロードするのを防ぐために使用されます。

詳細については、以下のドキュメントと例を参照してください。

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

このコードを使用すると、AuthGuardがを返しtrueた場合にのみAdminModuleのコードがアプリケーションに読み込まれます。

ユーザーがこのルートへのアクセスを許可されておらず、canActivateガードのみを使用した場合、ユーザーがAdminModuleそのルートにアクセスできなくても、が読み込まれます。

— フレドリック・ランディン
ソース
6
canActivate上記のシナリオで使用した場合、違いは何ですか？
— k11k2 2018年
3
canActiveモジュール付きの@ k11k2がロードされます（F12>ソース-クロムで）。あなたはthere.Withの.jsファイルを参照することができcanLoad、これらのモジュール（ファイルの.js）がロードされませんが:)私はそれをよりよく説明どこ上記の私の答えをチェック
— DiPix
23
管理者がログインし、管理モジュールが経由でロードされてcanLoadtrueを返し、アプリケーションからログアウトするシナリオについてはどうでしょうか。管理者以外のユーザーが同じブラウザにログインしますが、どのように機能しますか？ロードされたモジュールは削除されたか、キャッシュから削除されましたか？
— Keerthivasan 2018
2
@Keerthivasanは、ユーザーがログアウトし、AdminModuleをロードするための十分な権限を持たない別のアカウントで再度サインインしたときに、以前にロードされた遅延AdminModuleのチャンクを強制的に削除するものではありません。ただし、キャッシュされたモジュールがロードされている場合を除いて、とにかくアクセスを取得することはできません。通常、1つのデバイスが1人の実際のユーザーであるため、これは実際のセキュリティの問題ではないと思います
— hastrb
1
@ sgClaudia98は両方を使用できますが、ガードの実行には厳密な順序があります。これが、私が少し前に述べたことに関してあなたの場合に違いがない理由です。最初のコメントに非常に詳細な説明を入れたと思います。最近、デバイスが1つあり、管理者/非管理者が1つずつログインしている場合、これはかなり奇妙なケースになります。
— hastrb
36
  • CanActivate-ルートをアクティブ化できるかどうかを決定します。ガードがfalseを返した場合でも、このガードは常にモジュールをメモリにロードするため、このガードは遅延ロードされた機能モジュールに最適な方法ではない可能性があります。これは、ユーザーがアクセスを許可されていないことを意味します。ルート。
  • CanLoad-モジュールを遅延ロードできるかどうかを決定します。ルートをロードできるかどうかを制御します。これは、遅延ロードされる機能モジュールに役立ちます。ガードがfalseを返しても、ロードされません。

これは、遅延ロードされた機能モジュールを使用して両方のガードで行ったテストです。

1.CanActivateガードテスト

ネットワークページの下部に、9.5 MBのサイズで24のリクエストが送信され、3.34秒で完了し、3.47秒で完全に読み込まれたことがわかります。

遅延ロードされた機能モジュールでのガードテストのアクティブ化

1. CanLoadGuardテスト

ここでは、CanLoad Guardを使用した場合の大きな違いがわかります。ブラウザは、サイズ9.2 MBのリクエストを18回だけ送信し、2.64秒で完了し、2.59秒で完全に読み込まれました。

遅延ロードされた機能モジュールでのCanLoadガードテスト

CanLoad Guardは、ユーザーが許可されていない場合、モジュールデータをロードすることはありません。これにより、ロード時間がほぼ1秒短縮され、Webページのロードに膨大な時間がかかるため、パフォーマンスが向上します。モジュールのサイズによって異なります。

ヒント： プロジェクトでテストを行う場合Disable Cacheは、[ネットワーク]タブのチェックボックスがオンになっていることを確認してください。最初の画像でマークされています。

— マハムード・ファウジー
ソース
3
ただ、混同しないで誰か.. 403が401であるの不正、Forbbidenではないに
— hastrb
20

他の投稿のコメントからの質問について 「上記のシナリオでcanActivateを使用した場合、違いは何ですか？」

実際、ユーザーにとっては違いはなく、どちらの場合もページにアクセスすることはできません。隠れた違いが1つありますが。F12キーを押して、ダウンロードファイルがあるソース（Chrome内）に移動した場合。次に、コード付きのcanActiveファイル（chunk.js）がダウンロードされていることがわかります。ページにアクセスできない場合でも。 ここに画像の説明を入力してください

ただし、canLoadの場合、ソースコードを含むchunk.jsファイルはありません。

ここに画像の説明を入力してください

ご覧のとおり、これはセキュリティに非常に大きな影響を及ぼします。

そしてもちろん、canLoadはLazyLoadedモジュールにのみ使用できることを忘れないでください。

— DiPix
ソース
3
ネットワークタブに遅延読み込みモジュールのチャンクが表示されないが、ルートが期待どおりに機能しているモジュールがオンデマンドで読み込まれていることを確認するにはどうすればよいですか？
— k11k2 2018年
@ k11k2モジュールがどのファイルの一部であるかを確認したい場合はdebugger;、そのモジュールのコンポーネントの1つのコンストラクターにステートメントを追加するだけです。次に、それが個別のチャンクとしてロードされたか、mainなどのモジュールに含まれているかを確認できます。そのモジュールに分離されていないレイジーモジュール内のコンポーネントへの参照がある場合、それはとにかくロードされる可能性があります。これが表示された場合は、JSファイル以外でフィルタリングしているか、レイジーモジュールを一般的な「本当にレイジー」な部分に分割する必要があることを示しています。
— 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' }
— Sagar Jadhav
ソース
将来の読者のために、canActiveの例は怠惰ではありませんが、canLoadは..を持ってloadChildrenいるためです。また、角度の最近のバージョンは...あるloadChildren: () => import('./user/user.module').then(m => m.UserModule)
— hastrbは、
非常に簡単な説明、気に入った:)
— KTM
16

CanLoad Guardはレイジーロードされたモジュールのロードを防ぐことができます。通常、このガードは、権限のないユーザーがモジュールのルートに移動したり、停止してからモジュールのソースコードを表示したりしたくない場合に使用します。

AngularはcanActivateGuardを提供し、許可されていないユーザーがルートにアクセスするのを防ぎます。ただし、モジュールのダウンロードは停止しません。ユーザーはChromeデベロッパーコンソールを使用してソースコードを確認できます。CanLoad Guardは、モジュールがダウンロードされないようにします。

実際、CanLoadはロードされるモジュールを保護しますが、モジュールがロードされると、CanLoadガードは何もしません。認証されていないユーザーに対してCanLoadガードを使用してモジュールのロードを保護したとします。ユーザーがログインすると、そのモジュールがロード可能になり、そのモジュールによって構成された子パスをナビゲートできるようになります。ただし、ユーザーがログアウトしても、モジュールはすでにロードされているため、ユーザーはこれらの子パスをナビゲートできます。この場合、許可されていないユーザーから子パスを保護する場合は、CanActivateガードも使用する必要があります。

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の両方を使用する必要がありますか？
— タリダジョージ
0

許可されていないユーザーが入力した場合でもcanActivateは、そのモジュールをロードします。ロードする必要があるかどうかを判断するには、canLoadが必要です。

— LiHao
ソース
0

canLoadは誰かがあなたのソースコードを取得するのを止めないことに注意することが重要です。.jsは、ユーザーが許可されていない限りブラウザーによってダウンロードされませんが、ブラウザーコンソールでimport（ './ xxxxx.js'）を発行することにより、手動ダウンロードを強制できます。

モジュール名は、ルート定義のmain.jsで簡単に見つけることができます。

— イワン・ムリシ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.