Perbedaan antara canLoad Angular dan canActivate?

Apa perbedaan antara canLoaddan 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;
}

Kapan saya harus yang mana dari mereka?

canActivate digunakan untuk mencegah pengguna yang tidak sah mengakses rute tertentu. Lihat dokumen untuk info lebih lanjut.

canLoad digunakan untuk mencegah aplikasi memuat seluruh modul secara malas jika pengguna tidak diizinkan untuk melakukannya.

Lihat dokumen dan contoh di bawah untuk info lebih lanjut.

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

Dengan kode ini, kode untuk AdminModule hanya akan dimuat ke dalam aplikasi jika AuthGuard kembali true.

Jika pengguna tidak diizinkan untuk mengakses rute ini, dan kami hanya menggunakan canActivatepenjaga, AdminModuleitu akan dimuat, meskipun pengguna tidak akan dapat mengakses rute itu.

• CanActivate - Memutuskan apakah sebuah rute dapat diaktifkan, pelindung ini mungkin bukan cara terbaik untuk modul fitur yang dimuat secara malas, karena penjaga ini akan selalu memuat modul di memori, bahkan jika penjaga mengembalikan false yang berarti pengguna tidak diizinkan untuk mengakses rutenya.
• CanLoad - Memutuskan apakah modul dapat dimuat dengan malas, Mengontrol apakah rute dapat dimuat. Ini menjadi berguna untuk modul fitur yang dimuat lambat. Mereka bahkan tidak akan memuat jika penjaga kembali salah.

Ini adalah tes yang saya lakukan pada kedua penjaga dengan modul fitur yang dimuat lambat:

1. CanActivate Guard Test

Anda akan melihat di bagian bawah halaman Jaringan bahwa itu membuat 24 permintaan dengan ukuran 9,5 MB ditransfer selesai dalam 3,34 detik dan dimuat penuh dalam 3,47 detik.

1. Tes CanLoad Guard

di sini Anda akan melihat perbedaan besar ketika kami menggunakan CanLoad Guard karena browser hanya membuat 18 permintaan dengan ukuran 9,2 MB yang ditransfer selesai dalam 2,64 detik dan dimuat penuh 2,59 detik.

CanLoad Guard tidak pernah memuat data modul jika pengguna tidak berwenang dan itu memberi Anda kinerja lebih karena waktu muat berkurang hampir 1 detik dan itu merupakan waktu yang sangat lama dalam memuat halaman web, tidak diragukan lagi itu tergantung pada ukuran modul.

Tip: Jika Anda ingin melakukan tes pada proyek Anda, pastikan Disable Cachekotak centang di tab jaringan dicentang, itu ditandai di gambar pertama

Mengenai pertanyaan dari komentar di posting lain "Jika saya menggunakan canActivate dalam skenario di atas, apa bedanya?"

Sebenarnya bagi pengguna tidak akan ada perbedaan, dia tidak akan mendapatkan akses ke halaman dalam kedua kasus tersebut. Meski ada satu perbedaan tersembunyi . Jika Anda menekan F12 dan pindah ke Sumber (di Chrome) tempat mengunduh file. Kemudian Anda dapat melihat bahwa dalam kasus dengan file canActive dengan kode telah diunduh ( chunk.js ). Meskipun Anda tidak memiliki akses ke halaman tersebut.

Tetapi dalam kasus canLoad tidak akan ada file chunk.js dengan kode sumber.

Jadi seperti yang Anda lihat, ini berdampak sangat besar bagi keamanan.

Dan tentunya jangan lupa bahwa canLoad hanya bisa digunakan untuk LazyLoaded Modules .

The CanLoad Penjaga mencegah pemuatan malas Modul Loaded. Kami biasanya menggunakan pelindung ini ketika kami tidak ingin pengguna yang tidak sah untuk menavigasi ke salah satu rute modul dan juga berhenti bahkan melihat kode sumber dari modul.

Angular menyediakan penjaga canActivate , yang mencegah pengguna yang tidak sah mengakses rute. Tetapi itu tidak menghentikan modul untuk diunduh. Pengguna dapat menggunakan konsol pengembang chrome untuk melihat kode sumber. CanLoad Guard mencegah modul agar tidak diunduh.

Sebenarnya, CanLoad melindungi modul yang akan dimuat tetapi setelah modul dimuat, penjaga CanLoad tidak akan melakukan apa-apa. Misalkan kita telah melindungi pemuatan modul menggunakan CanLoad guard untuk pengguna yang tidak berkepentingan. Saat pengguna masuk, modul itu akan berlaku untuk dimuat dan kita akan dapat menavigasi jalur turunan yang dikonfigurasi oleh modul itu. Namun saat pengguna keluar, pengguna tetap dapat menavigasi jalur turunan tersebut karena modul sudah dimuat. Dalam kasus ini jika kita ingin melindungi jalur anak dari pengguna yang tidak sah, kita juga perlu menggunakan penjaga CanActivate .

Gunakan CanLoad sebelum memuat AdminModule:

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

Setelah memuat AdminModule, di modul AdminRouting kita dapat menggunakan CanActive untuk melindungi anak dari pengguna yang tidak sah seperti di bawah ini:

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

canActivate digunakan untuk mencegah pengguna yang tidak sah

canLoad digunakan untuk mencegah seluruh modul aplikasi

Contoh canActivate :

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

Contoh canLoad :

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

canActivate jika pengguna yang tidak sah masih memasukkan modul itu. Anda perlu canLoad untuk membuat penilaian apakah perlu dimuat.

Penting untuk diperhatikan bahwa canLoad tidak akan menghentikan seseorang untuk mendapatkan kode sumber Anda. .Js tidak akan diunduh oleh browser kecuali pengguna diizinkan, tetapi Anda dapat memaksa unduhan manual dengan mengeluarkan impor ('./ xxxxx.js') pada konsol browser.

Nama modul dapat dengan mudah ditemukan di main.js pada definisi rute Anda.