Perbedaan antara canLoad Angular dan canActivate?

105

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?

angular 
— Yoav Schniederman
sumber

Jawaban:

104

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.

— Fredrik Lundin
sumber
7
Jika saya menggunakan canActivateskenario di atas, apa bedanya?
— k11k2
3
@ k11k2 dengan canActivemodul akan dimuat (F12> Sumber - di chrome). Anda dapat melihat file .js di sana. Dengan canLoadmodul ini (file .js) tidak akan dimuat :) Periksa jawaban saya di atas di mana saya menjelaskannya dengan lebih baik
— DiPix
23
Bagaimana dengan skenario di mana Admin login, sehingga modul admin dimuat melalui canLoadreturn true dan kemudian logout dari aplikasi. Sekarang, pengguna non-admin login di browser yang sama, bagaimana cara kerjanya? Apakah modul yang dimuat diusir atau dihapus dari cache?
— Keerthivasan
2
@Keerthivasan tidak memaksa untuk menghapus bagian yang dimuat sebelumnya dari AdminModule yang malas saat pengguna keluar dan masuk lagi dengan akun lain yang tidak memiliki cukup izin untuk memuat AdminModule. Namun, Anda tetap tidak akan mendapatkan akses .. kecuali memiliki modul cache yang dimuat. Saya rasa ini bukan masalah keamanan yang nyata karena biasanya satu perangkat adalah satu pengguna nyata
— hastrb
1
@ sgClaudia98 Anda dapat menggunakan keduanya, tetapi ada urutan eksekusi yang ketat. inilah mengapa tidak ada bedanya dalam kasus Anda mengenai apa yang saya nyatakan sedikit sebelumnya. Saya rasa saya memberikan penjelasan yang sangat rinci dalam komentar pertama saya. Itu akan menjadi kasus yang sangat aneh jika ada satu perangkat dan admin / bukan admin login satu per satu saat ini.
— hastrb
36
  • 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.

CanActivate Guard Test On Lazy Loaded Feature Module

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 Test Pada Modul Fitur Lazy Loaded

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

— Mahmoud Fawzy
sumber
4
Hanya untuk tidak membingungkan seseorang .. 403 adalah Forbbiden, bukan Unauthorized yaitu 401.
— hastrb
penjaga ini akan selalu memuat modul di memori, bahkan jika penjaga tersebut kembali palsu saya pikir perilaku ini tidak sesuai. Akan lebih baik untuk tidak memuat modul saat canActivatemengembalikan false
— Olivier Boissé
20

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. masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

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

— DiPix
sumber
3
tidak dapat melihat potongan apa pun untuk modul pemuatan lambat di tab jaringan saya tetapi rute berfungsi seperti yang diharapkan, bagaimana saya dapat mengonfirmasi pemuatan modul saya sesuai permintaan atau tidak?
— k11k2
@ k11k2 jika Anda ingin melihat file mana yang merupakan bagian dari modul, tambahkan saja debugger;pernyataan di konstruktor untuk salah satu komponen dalam modul itu. Anda kemudian dapat melihat apakah itu dimuat sebagai potongan terpisah atau termasuk dalam modul seperti main. Jika Anda memiliki referensi ke komponen dalam modul malas yang tidak diisolasi ke modul itu, ia mungkin tetap dimuat. Jika Anda melihat ini, ini menunjukkan bahwa Anda memfilter berdasarkan sesuatu selain file JS, atau Anda perlu memecah modul lazy Anda menjadi bagian-bagian umum dan 'benar-benar malas'.
— Simon_Weaver
@ k11k2 Saya rasa "modul pemuatan malas" Anda tidak dimuat dengan malas. Pastikan Anda telah menggunakan loadChildrenproperti sebagai bagian dari jalur ke modul malas Anda.
— hastrb
18

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 ]
        }
      ]
    }
— Mohammad niazmand
sumber
Jadi, seseorang harus menggunakan canLoad dan canActivate?
— Tarida George
dijelaskan dengan sangat baik: thumbsup
— Aliasgher Nooruddin
16

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' }
— Sagar Jadhav
sumber
Bagi pembaca yang akan datang, contoh canActive tidak malas, tapi canLoad .. karena memiliki loadChildren. Selain itu, versi terbaru dari sudut adalah ..loadChildren: () => import('./user/user.module').then(m => m.UserModule)
— hastrb
Penjelasan yang sangat sederhana, menyukainya :)
— KTM
0

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

— LiHao
sumber
0

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.

— Ivan Muricy
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.