Canactivate v / s canload в angular

Защита авторизации вносит большой вклад в ленивую загрузку модулей angular. Кстати, в angular есть много типов защиты, например (CanActivate, CanActivateChild, canDeactivate, CanLoad). Но мы поговорим о canActivate и canLoad guard.

Если маршрут должен быть открыт на основании условия, то это возможно для охранника.

Краткая и полная информация →

CanActivate: защищает маршрут, но не препятствует загрузке этого модуля.

canActivate(): Promise<boolean | UrlTree> {
    if (localStorage.getItem("token")) {
      const tree:UrlTree=this.router.parseUrl('/');
      return tree;
    } else {
      return true;
    }
  }

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

canLoad(): Promise<boolean | UrlTree> {
    if (localStorage.getItem("token")) {
      return true;
    } else {
      const tree:UrlTree=this.router.parseUrl('/login');
      return tree;
    }
  }

Можно активировать и загрузить с примером

Защиты маршрута чаще всего реализуются как классы, реализующие необходимый интерфейс защиты маршрута. Давайте посмотрим на пример с защитой маршрута CanActivate, где мы запрашиваем у службы аутентификации, аутентифицирован ли пользователь:

Интерфейс CanLoad не имеет доступа к текущему состоянию маршрутизатора или активированному маршруту.

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

Нажмите 👏 или Следуйте за мной на Medium или Linkedin , чтобы узнать больше о Angular и Javascript, Pradeep и JS!