Реализован Auth Guard в приложении Angular 6. Реализация не работает.

Question

Реализовано Auth Guard в угловых 6 приложениях. Реализация не работает.

Auth Guard

export class AuthGuard implements CanActivate {
      constructor(public manageAccountService: ManageAccountService, public myRoute: Router) {}
      canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean {
        this.manageAccountService.getAccounts().subscribe(
          (res) => {
            if (res.d.Status == 0) {
                this.myRoute.navigate([next.url[0].path.toString()]);
              return true;
            }
            else {
              window.location.href = environment.LOGIN_URL;
            }
          }
        );

      return false;
      }
    }

Ожидаемый результат Перенаправить на next.url

Фактический результат застрял в цикле отправки manageAccountService.getAccounts() запрос несколько раз

Answer 1

Это происходит потому, что охранник запускается на каждом этапе жизненного цикла. И их много.

Смотри, как будто стражник бежал на

• ngOnInit
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked

(как будто, потому что он запускается при каждом событии навигации, и его намного больше, и он не говорит ни с кем)

И вы не назначаете свою подписку какой-либо переменной, что означает, что она делает подписку на каждый звонок.

Наконец, подпись охранника активации:

boolean | Observable<boolean> | Promise<boolean>

И в вашем случае вы ничего не возвращаете (если вы не понимаете почему, посмотрите документацию RxJS).

Вы не должны делать HTTP-вызовы для охранника, но если вы хотите сделать это, вот синтаксис:

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable < boolean > {
  if (this['get_accounts_called']) { return false; }
  this['get_accounts_called'] = return this.manageAccountService.getAccounts()
    .pipe(map(res => res.d.Status == 0))
}