Różnica między canLoad i canActivate w Angular?

Jaka jest różnica między canLoadi 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;
}

Kiedy powinienem, który z nich?

canActivate służy do uniemożliwienia nieautoryzowanym użytkownikom dostępu do niektórych tras. Zobacz dokumentację, aby uzyskać więcej informacji.

canLoad służy do zapobiegania leniwemu ładowaniu całych modułów przez aplikację, jeśli użytkownik nie jest do tego upoważniony.

Zobacz dokumentację i przykład poniżej, aby uzyskać więcej informacji.

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

Za pomocą tego kodu kod modułu AdminModule zostanie załadowany do aplikacji tylko wtedy, gdy zwróci AuthGuard true.

Jeśli użytkownik nie jest upoważniony do dostępu do tej trasy, a użyliśmy tylko canActivatestrażnika, AdminModulezostanie załadowany, nawet jeśli użytkownik nie miałby dostępu do tej trasy.

• CanActivate - decyduje, czy trasa może zostać aktywowana, ta ochrona może nie być najlepszym sposobem dla modułów funkcji, które są ładowane z opóźnieniem, ponieważ strażnik zawsze ładuje moduł do pamięci, nawet jeśli strażnik zwrócił błąd, co oznacza, że ​​użytkownik nie ma uprawnień dostępu trasa.
• CanLoad - decyduje, czy moduł może być ładowany leniwie, kontroluje, czy można w ogóle załadować trasę. Jest to przydatne w przypadku modułów funkcji, które są ładowane z opóźnieniem. Nie załadują się nawet, jeśli strażnik zwróci fałsz.

To jest test, który przeprowadziłem na obu strażnikach z modułem funkcji, który jest ładowany leniwie:

1. CanActivate Guard Test

zauważysz na dole strony Network, że wysłał 24 żądania o rozmiarze 9,5 MB, które zostały przesłane w 3,34 sekundy i w pełni załadowane w 3,47 sekundy.

1. Test CanLoad Guard

tutaj zobaczysz dużą różnicę, gdy użyliśmy CanLoad Guard, ponieważ przeglądarka przesłała tylko 18 żądań o rozmiarze 9,2 MB, które zostały przesłane, kończąc w 2,64 sekundy i w pełni ładując 2,59 sekundy.

CanLoad Guard nigdy nie ładuje danych modułu, jeśli użytkownik nie jest autoryzowany, co zapewnia większą wydajność, ponieważ czas ładowania zmniejszył się o prawie 1 sekundę, a to jest ogromny czas wczytywania stron internetowych, bez wątpienia zależy to od rozmiaru modułu.

Wskazówka: jeśli chcesz wykonać test na swoim projekcie upewnij się, że Disable Cachecheckbox w zakładce sieci jest zaznaczony, jest zaznaczony na pierwszym obrazku

Odnośnie pytania z komentarzy w innym poście „Jeśli użyję canActivate w powyższym scenariuszu, jaka będzie różnica?”

Właściwie dla użytkownika nie będzie różnicy, nie uzyska on dostępu do strony w obu przypadkach. Chociaż jest jedna ukryta różnica . Jeśli naciśniesz F12 i przejdziesz do Źródła (w Chrome), gdzie są pobierane pliki. Następnie możesz zobaczyć, że w przypadku canActive został pobrany plik z kodem ( chunk.js ). Nawet jeśli nie masz dostępu do strony.

Ale w przypadku canLoad nie będzie pliku chunk.js z kodem źródłowym.

Jak więc widzisz, ma to naprawdę duży wpływ na bezpieczeństwo.

I oczywiście nie zapominaj, że canLoad może być używany tylko dla modułów LazyLoaded .

CanLoad Straż uniemożliwia ładowanie Lazy Loaded Module. Zwykle używamy tego strażnika, gdy nie chcemy, aby nieautoryzowany użytkownik nawigował do żadnej z tras modułu, a także zatrzymał się, a nawet zobaczył kod źródłowy modułu.

Angular zapewnia canActivate Guard, który uniemożliwia nieautoryzowanemu dostęp do trasy. Nie przeszkadza to jednak w pobieraniu modułu. Użytkownik może użyć konsoli programisty chrome, aby zobaczyć kod źródłowy. CanLoad Guard zapobiega pobieraniu modułu.

W rzeczywistości CanLoad chroni moduł do załadowania, ale po załadowaniu modułu ochrona CanLoad nic nie zrobi. Załóżmy, że zabezpieczyliśmy ładowanie modułu za pomocą ochrony CanLoad dla nieuwierzytelnionego użytkownika. Gdy użytkownik jest zalogowany, moduł będzie można załadować i będziemy mogli nawigować po ścieżkach podrzędnych skonfigurowanych przez ten moduł. Ale gdy użytkownik jest wylogowany, nadal będzie mógł nawigować po ścieżkach podrzędnych, ponieważ moduł jest już załadowany. W takim przypadku, jeśli chcemy zabezpieczyć ścieżki podrzędne przed nieautoryzowanymi użytkownikami, musimy również użyć osłony CanActivate .

Użyj CanLoad przed załadowaniem modułu AdminModule:

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

Po załadowaniu AdminModule, w module AdminRouting możemy użyć CanActive do ochrony dzieci przed nieautoryzowanymi użytkownikami, jak poniżej:

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

canActivate służy do zapobiegania nieautoryzowanemu użytkownikowi

canLoad służy do zapobiegania całemu modułowi aplikacji

Przykład canActivate :

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

Przykład canLoad :

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

canActivate, jeśli wejdzie nieautoryzowany użytkownik, nadal ładuje ten moduł. Potrzebujesz canLoad, aby ocenić, czy należy go załadować.

Warto zauważyć, że canLoad nie powstrzyma nikogo przed uzyskaniem Twojego kodu źródłowego. Plik .js nie zostanie pobrany przez przeglądarkę, chyba że użytkownik ma autoryzację, ale możesz wymusić ręczne pobranie, wykonując import („./ xxxxx.js”) w konsoli przeglądarki.

Nazwę modułu można łatwo znaleźć w pliku main.js w definicji tras.