Angular'ın canLoad ve canActivate arasındaki fark nedir?

Arasındaki fark nedir canLoadve 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;
}

Hangisini ne zaman yapmalıyım?

canActivate , yetkisiz kullanıcıların belirli rotalara erişmesini önlemek için kullanılır. Daha fazla bilgi için belgelere bakın .

canLoad , kullanıcının yetkisi yoksa uygulamanın tüm modülleri tembel olarak yüklemesini önlemek için kullanılır.

Daha fazla bilgi için aşağıdaki belgelere ve örneğe bakın.

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

Bu kodla, AdminModule için kod yalnızca AuthGuard geri dönerse uygulamaya yüklenecektir true.

Kullanıcının bu rotaya erişme yetkisi yoksa ve biz sadece bir canActivatekoruma kullanmış olsaydık, kullanıcı bu rotaya erişemese AdminModulebile yüklenirdi.

• CanActivate - Bir rotanın etkinleştirilip etkinleştirilemeyeceğine karar verir, bu koruma, gecikmeli olarak yüklenen özellik modülleri için en iyi yol olmayabilir, çünkü koruma yanlış dönse bile, bu koruma modülü her zaman belleğe yükleyecektir, bu da kullanıcının erişim yetkisinin olmadığı anlamına gelir rota.
• CanLoad - Bir modülün tembel olarak yüklenip yüklenemeyeceğine karar verir, Bir rotanın yüklenip yüklenemeyeceğini kontrol eder. Bu, geç yüklenen özellik modülleri için kullanışlı hale gelir. Koruma yanlış dönerse bile yüklenmezler.

Bu, tembel yüklü bir özellik modülüyle her iki koruma üzerinde yaptığım bir test:

1. Koruma Testini Etkinleştirebilir

Ağ sayfasının alt kısmında 9.5 MB büyüklüğünde 24 istek yaptığını ve 3.34 saniyede tamamlandığını ve 3.47 saniyede tam yüklendiğini fark edeceksiniz.

1. CanLoad Guard Testi

Burada CanLoad Guard'ı kullandığımızda büyük farkı göreceksiniz, çünkü tarayıcı 2,64 saniyede ve tam yüklü 2,59 saniyede 9,2 MB büyüklüğünde yalnızca 18 istek yaptı.

CanLoad Guard, kullanıcı yetkilendirilmemişse modül verilerini asla yüklemez ve bu size daha fazla performans sağlar çünkü yükleme süresi neredeyse 1 saniye azalır ve bu, web sayfalarını yüklemede çok büyük bir süredir, şüphesiz modül boyutuna bağlıdır.

İpucu: Projenizde testi yapmak istiyorsanız Disable Cache, ağ sekmesindeki onay kutusunun işaretli olduğundan emin olun, ilk görüntüde işaretlendi

Diğer gönderideki yorumlardan gelen soruya gelince, "Yukarıdaki senaryoda canActivate kullanırsam fark ne olur?"

Aslında kullanıcı için bir fark olmayacak, her iki durumda da sayfaya erişim sağlayamayacak. Gizli bir fark olmasına rağmen . F12'ye basar ve Dosyaların indirildiği Kaynaklar'a (Chrome'da) geçerseniz. Daha sonra, kodlu canActive dosyasının indirilmesi durumunda bunu görebilirsiniz ( chunk.js ). Sayfaya erişiminiz olmasa bile.

Ancak canLoad durumunda , kaynak kodlu chunk.js dosyası olmayacaktır .

Gördüğünüz gibi bunun güvenlik için gerçekten büyük bir etkisi var.

Ve elbette canLoad'un sadece LazyLoaded Modüller için kullanılabileceğini unutmayın .

canActivate , yetkisiz bir kullanıcıyı önlemek için kullanılır

canLoad , uygulamanın tüm modülünü önlemek için kullanılır

Örnek canActivate :

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

Örnek canLoad :

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

CanLoad Görevlisi Lazy yüklenmiş bir modül yükleme önler. Bu korumayı genellikle yetkisiz bir kullanıcının modülün herhangi bir rotasına gitmesini istemediğimizde ve hatta modülün kaynak kodunu görüp durduktan sonra bile kullanırız.

Angular, yetkisiz kullanıcıların rotaya erişmesini önleyen canActivate Guard özelliğini sağlar . Ancak modülün indirilmesini durdurmaz. Kullanıcı, kaynak kodunu görmek için chrome geliştirici konsolunu kullanabilir. CanLoad Guard, modülün indirilmesini engeller.

Aslında, CanLoad bir modülü yüklenmek üzere korur , ancak modül yüklendikten sonra CanLoad koruması hiçbir şey yapmaz. Kimliği doğrulanmamış kullanıcı için CanLoad koruması kullanarak bir modül yüklemesini koruduğumuzu varsayalım . Kullanıcı oturum açtığında, bu modül yüklenmeye uygun olacak ve bu modül tarafından yapılandırılan çocuk yollarda gezinebileceğiz. Ancak kullanıcı oturumu kapattığında, modül zaten yüklü olduğu için yine de kullanıcı bu alt yollarda gezinebilecektir. Bu durumda, çocuk yollarını yetkisiz kullanıcılardan korumak istiyorsak, CanActivate korumasını da kullanmamız gerekir .

AdminModule'u yüklemeden önce CanLoad'u kullanın :

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

AdminModule'u yükledikten sonra, AdminRouting modülünde CanActive'i aşağıdaki gibi yetkisiz kullanıcılardan korumak için kullanabiliriz :

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

Yetkisiz kullanıcı girerse etkinleştirin o modülü yükler. İhtiyacınız canLoad o yüklenecek ihtiyacı olmadığını yargı elde etmek.

CanLoad'un birisinin kaynak kodunuzu almasını engellemeyeceğini fark etmek önemlidir . .Js, kullanıcı yetkilendirilmedikçe tarayıcı tarafından indirilmez, ancak tarayıcı konsolunda bir içe aktarma ('./ xxxxx.js') yayınlayarak manuel indirmeyi zorlayabilirsiniz.

Modül adı, rotalar tanımlamanızdaki main.js'de kolayca bulunabilir.