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

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

Когда мне нужно, какой из них?

ОТВЕТЫ

Ответ 1

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

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

Дополнительную информацию см. В документах и примерах ниже.

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

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

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

Ответ 2

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

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

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

enter image description here

Таким образом, вы можете видеть, что это действительно сильно влияет на безопасность.

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

Ответ 3

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

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

Пример canActivate:

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

Пример canLoad:

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