Разница между canLoad и canActivate в Angular?

В чем разница между canLoadи 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;
}

Когда мне следует какой из них?

canActivate используется для предотвращения доступа неавторизованных пользователей к определенным маршрутам. См. Документы для получения дополнительной информации.

canLoad используется для предотвращения ленивой загрузки целых модулей приложением, если пользователь не авторизован для этого.

См. Документы и пример ниже для получения дополнительной информации.

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

С этим кодом код для AdminModule будет загружен в приложение только в случае возврата AuthGuard true.

Если пользователь не авторизован для доступа к этому маршруту, и мы использовали только canActivateохрану, AdminModuleфайл будет загружен, даже если пользователь не сможет получить доступ к этому маршруту.

• CanActivate - решает, можно ли активировать маршрут, эта защита может быть не лучшим способом для функциональных модулей, которые загружаются лениво, поскольку эта защита всегда будет загружать модуль в память, даже если охрана вернула false, что означает, что пользователь не авторизован для доступа маршрут.
• CanLoad - определяет, можно ли лениво загружать модуль, контролирует, можно ли загрузить маршрут. Это становится полезным для функциональных модулей, которые загружаются лениво. Они даже не загрузятся, если охранник вернет false.

Это тест, который я провел на обоих охранниках с ленивым загруженным функциональным модулем:

1. Тест CanActivate Guard

Внизу страницы «Сеть» вы заметите, что он сделал 24 запроса размером 9,5 МБ, завершил передачу за 3,34 секунды и полную загрузку за 3,47 секунды.

1. Тест CanLoad Guard

здесь вы увидите большую разницу, когда мы использовали CanLoad Guard, поскольку браузер сделал всего 18 запросов размером 9,2 МБ, передал завершение за 2,64 секунды и полную загрузку за 2,59 секунды.

CanLoad Guard никогда не загружает данные модуля, если пользователь не авторизован, и это дает вам больше производительности, поскольку время загрузки уменьшилось почти на 1 секунду, а это огромное время для загрузки веб-страниц, без сомнения, это зависит от размера модуля.

Совет: если вы хотите провести тест в своем проекте, убедитесь, что Disable Cacheфлажок на вкладке сети установлен, он отмечен на первом изображении

Что касается вопроса из комментариев в другом сообщении «Если я использую canActivate в приведенном выше сценарии, какая будет разница?»

Собственно для пользователя разницы не будет, он не получит доступа к странице в обоих случаях. Хотя есть одно скрытое отличие . Если вы нажмете F12 и перейдете в Источники (в Chrome), где находятся файлы для загрузки. Тогда вы увидите, что в случае с canActive был загружен файл с кодом ( chunk.js ). Даже если у вас нет доступа к странице.

Но в случае с canLoad там не будет chunk.js файл с исходным кодом.

Как видите, это действительно сильно влияет на безопасность.

И, конечно же, не забывайте, что canLoad можно использовать только для модулей LazyLoaded .

canActivate используется для предотвращения несанкционированного доступа

canLoad используется для предотвращения всего модуля приложения

Пример canActivate :

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

Пример canLoad :

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

CanLoad Guard предотвращает загрузку загруженного модуля ленивых. Обычно мы используем эту защиту, когда мы не хотим, чтобы неавторизованный пользователь переходил к любому из маршрутов модуля, а также останавливался, а затем даже видел исходный код модуля.

Angular предоставляет canActivate Guard, который предотвращает несанкционированный доступ к маршруту. Но это не мешает загрузке модуля. Пользователь может использовать консоль разработчика Chrome для просмотра исходного кода. CanLoad Guard предотвращает загрузку модуля.

Фактически, CanLoad защищает загружаемый модуль, но после загрузки модуля CanLoad guard ничего не сделает. Предположим, мы защитили загрузку модуля с помощью CanLoad guard для неаутентифицированного пользователя. Когда пользователь вошел в систему, этот модуль можно будет загрузить, и мы сможем перемещаться по дочерним путям, настроенным этим модулем. Но когда пользователь выйдет из системы, он по-прежнему сможет перемещаться по этим дочерним путям, потому что модуль уже загружен. В этом случае, если мы хотим защитить дочерние пути от неавторизованных пользователей, нам также необходимо использовать CanActivate guard.

Используйте CanLoad перед загрузкой AdminModule:

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

После загрузки AdminModule в модуле AdminRouting мы можем использовать CanActive для защиты детей от неавторизованных пользователей, как показано ниже:

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

canActivate, если неавторизованный пользователь входит, по-прежнему загружает этот модуль. вам понадобится canLoad, чтобы решить, нужно ли его загружать.

Важно отметить, что canLoad никому не помешает получить ваш исходный код. .Js не будет загружен браузером, если пользователь не авторизован, но вы можете принудительно выполнить загрузку вручную, выполнив импорт ('./ xxxxx.js') в консоли браузера.

Имя модуля можно легко найти на main.js в определении маршрутов.