Блог

В моем приложении Angular2 я использую canActivate для разрешения доступа к страницам. Часть этого заключается в том, чтобы проверить на сервере, что токен не был подделан, поэтому, прежде чем я смогу решить, может ли пользователю быть предоставлен доступ, мне нужно вызвать мой api. Это означает подписку на наблюдаемый и ожидание ответа.

Мне нужно вернуть true или false, но поскольку я выполняю вызов asyns, я не могу вернуться на основе моего ответа. Я понимаю, что не могу ждать, поскольку он однопоточный, но мне нужно как-то заблокировать, пока я не получу ответ от api. мой canActivate выглядит следующим образом:

 canActivate() {
   this.guardClient.checkToken("token")
  .subscribe(response => {
    let responseText = response.text().replace(/"/g, '');
    if ( responseText === 'Ok')
    {
      return true;
    }
    if(responseText === 'denied') {

      this.router.navigate(['login']); // redirecting to login
      return false;
    }
  });
}
  

Может кто-нибудь сказать мне, как решить эту проблему??

При просмотре интерфейса canActivate в angular 2 я вижу следующее:

 export interface CanActivate {
    canActivate(route: ActivatedRouteSnapshot, state:     RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
}
  

Как вы можете видеть, вы также можете просто вернуть наблюдаемое, а не просто логическое значение.
Это означает, что ваш код может быть переписан примерно так.

 canActivate() {
 return this.guardClient.checkToken("token")
   .map(response => {
     let responseText = response.text().replace(/"/g, '');
     if ( responseText === '  Ok')
      {
       return true;
      }
     if(responseText === 'denied') {
        this.router.navigate(['login']); // redirecting to login
        return false;
   }
 });
}
  

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