Різниця між 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 - вирішує, чи можна модуль ліниво завантажувати, контролює, чи можна маршрут навіть завантажити. Це стає корисним для функціональних модулів, які ледаче завантажуються. Вони навіть не завантажаться, якщо охоронець поверне помилку.

Це тест, який я зробив на обох охоронцях із модулем функцій, який ледаче завантажується:

1. CanActivate Guard Test

Ви помітите внизу Мережевої сторінки, що він зробив 24 запити розміром 9,5 МБ, передану обробку за 3,44 секунди та повністю завантажену за 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 нічого не зробить. Припустимо, ми захистили завантаження модуля за допомогою захисту CanLoad для неавторизованого користувача. Коли користувач увійде в систему, тоді цей модуль буде застосовним для завантаження, і ми зможемо орієнтуватися у дочірніх шляхах, налаштованих цим модулем. Але коли користувач виходить із системи, користувач все ще зможе орієнтуватися в цих дочірніх шляхах, оскільки модуль уже завантажений. У цьому випадку, якщо ми хочемо захистити дитячі шляхи від несанкціонованих користувачів, нам також потрібно використовувати захист CanActivate .

Використовуйте 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 у визначенні маршрутів.