Unterschied zwischen Angulars canLoad und canActivate?

Was ist der Unterschied zwischen canLoadund 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;
}

Wann sollte ich welche von ihnen?

Mit canActivate wird verhindert, dass nicht autorisierte Benutzer auf bestimmte Routen zugreifen. Weitere Informationen finden Sie in den Dokumenten .

canLoad wird verwendet, um zu verhindern, dass die Anwendung ganze Module träge lädt, wenn der Benutzer nicht dazu berechtigt ist.

Weitere Informationen finden Sie in den Dokumenten und im Beispiel unten.

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

Mit diesem Code wird der Code für das AdminModule nur dann in die Anwendung geladen, wenn AuthGuard zurückkehrt true.

Wenn der Benutzer nicht berechtigt ist, auf diese Route zuzugreifen, und wir nur einen canActivateWachmann verwendet haben, wird der AdminModulegeladen, obwohl der Benutzer nicht auf diese Route zugreifen kann.

• CanActivate - Legt fest, ob eine Route aktiviert werden kann. Dieser Guard ist möglicherweise nicht der beste Weg für Feature-Module, die verzögert geladen werden, da dieser Guard das Modul immer in den Speicher lädt, auch wenn der Guard false zurückgegeben hat. Dies bedeutet, dass der Benutzer nicht zum Zugriff berechtigt ist die Route.
• CanLoad - Legt fest, ob ein Modul träge geladen werden kann. Steuert, ob eine Route überhaupt geladen werden kann. Dies ist nützlich für Feature-Module, die verzögert geladen werden. Sie werden nicht einmal geladen, wenn der Wächter false zurückgibt.

Dies ist ein Test, den ich an beiden Wachen mit einem Funktionsmodul durchgeführt habe, das faul geladen ist:

1. CanActivate Guard Test

Sie werden am Ende der Netzwerkseite feststellen, dass 24 Anfragen mit einer Größe von 9,5 MB übertragen wurden, die in 3,34 Sekunden abgeschlossen und in 3,47 Sekunden vollständig geladen wurden.

1. CanLoad Guard Test

Hier sehen Sie den großen Unterschied, als wir CanLoad Guard verwendeten, da der Browser nur 18 Anfragen mit einer Größe von 9,2 MB stellte, die in 2,64 Sekunden übertragen und 2,59 Sekunden vollständig geladen wurden.

CanLoad Guard lädt niemals die Moduldaten, wenn der Benutzer nicht autorisiert ist. Dies bietet Ihnen mehr Leistung, da die Ladezeit um fast 1 Sekunde abnimmt. Dies ist eine enorme Zeit beim Laden von Webseiten, ohne Zweifel hängt dies von der Modulgröße ab.

Tipp: Wenn Sie den Test für Ihr Projekt durchführen möchten, stellen Sie sicher, dass das Disable CacheKontrollkästchen auf der Registerkarte "Netzwerk" aktiviert ist und im ersten Bild markiert ist

In Bezug auf Fragen aus Kommentaren in anderen Beiträgen "Wenn ich canActivate im obigen Szenario verwende, was ist der Unterschied?"

Tatsächlich gibt es für den Benutzer keinen Unterschied, er erhält in beiden Fällen keinen Zugriff auf die Seite. Obwohl es einen versteckten Unterschied gibt . Wenn Sie F12 drücken und zu Quellen (in Chrome) wechseln, in denen sich Dateien herunterladen. Dann können Sie sehen, dass für den Fall, dass mit canActive eine Datei mit Code heruntergeladen wurde ( chunk.js ). Auch wenn Sie keinen Zugriff auf die Seite haben.

Im Fall von canLoad gibt es jedoch keine chunk.js- Datei mit Quellcode.

Wie Sie sehen, hat dies große Auswirkungen auf die Sicherheit.

Und vergessen Sie natürlich nicht, dass canLoad nur für LazyLoaded-Module verwendet werden kann .

canActivate wird verwendet, um einen nicht autorisierten Benutzer zu verhindern

canLoad wird verwendet, um das gesamte App-Modul zu verhindern

Beispiel für canActivate :

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

Beispiel für canLoad :

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

Das CanLoad Guard verhindert das Laden des Lazy Loaded Module. Wir verwenden diesen Schutz im Allgemeinen, wenn wir nicht möchten, dass nicht autorisierte Benutzer zu einer der Routen des Moduls navigieren und auch anhalten und dann sogar den Quellcode des Moduls sehen.

Der Angular bietet canActivate Guard, das verhindert, dass nicht autorisierte Benutzer auf die Route zugreifen. Das Herunterladen des Moduls wird jedoch nicht verhindert. Der Benutzer kann die Chrome-Entwicklerkonsole verwenden, um den Quellcode anzuzeigen. Der CanLoad Guard verhindert, dass das Modul heruntergeladen wird.

Tatsächlich schützt CanLoad ein zu ladendes Modul, aber sobald das Modul geladen ist, unternimmt CanLoad Guard nichts mehr. Angenommen, wir haben das Laden eines Moduls mit CanLoad Guard für nicht authentifizierte Benutzer geschützt . Wenn der Benutzer angemeldet ist, kann dieses Modul geladen werden, und wir können in den von diesem Modul konfigurierten untergeordneten Pfaden navigieren. Wenn der Benutzer abgemeldet ist, kann der Benutzer dennoch in diesen untergeordneten Pfaden navigieren, da das Modul bereits geladen ist. In diesem Fall müssen wir auch CanActivate Guard verwenden , um untergeordnete Pfade vor nicht autorisierten Benutzern zu schützen.

Verwenden Sie CanLoad, bevor Sie AdminModule laden:

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

Nach dem Laden von AdminModule können wir im AdminRouting-Modul CanActive verwenden , um Kinder vor nicht autorisierten Benutzern wie unten zu schützen:

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

canActivate, wenn ein nicht autorisierter Benutzer eingibt, lädt das Modul weiterhin. Sie benötigen canLoad , um zu beurteilen, ob es geladen werden muss.