Ответ API приходит после вызова метода canActivate

Question

Я действительно нуб в ангулярном. Я написал службу охраны для того, чтобы только авторизованные (вошедшие в систему) пользователи могли иметь доступ к определенным компонентам. Я использую asp.net для серверной части, у меня есть API на стороне сервера, чтобы вернуть статус авторизованного, метод async. проблема в том, что иногда API-ответ приходит после вызова метода canActivate, поэтому метод возвращает значение false, хотя пользователь авторизован.

@Injectable()
export class AuthenticationGuardService implements CanActivate {
  isSignedIn: boolean = false;
  result: Object;
  constructor(private router: Router,private http: HttpClient, @Inject('BASE_URL') private url: string) {
    this.http.get(this.url + 'api/Authentication/UserInfo').subscribe(
      result => {
        if (result != null) {
          this.isSignedIn = true;
        }
      }
    )
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    if (!this.isSignedIn) {
      this.router.navigate(['sign-in']);
    }
    return this.isSignedIn;
  }
}

        public async Task<IActionResult> UserInfo()
        {
            var user = await userManager.GetUserAsync(HttpContext.User);
            if (user == null)
            {
                return null;
            }
            return Json(new
            {
                email = user.Email,
                name = user.FirstName,
                family = user.LastName
            });
        }

Answer 1

Проблема здесь в том, что между вызовом API и оценкой переменной isSignedIn существует условие состязания.Мы можем разобраться в этом.

Если вы посмотрите на документы для CanActivate Guard, вы увидите, что Observable<boolean> является одним из возможных типов возврата.Поэтому удалите код HTTP в конструкторе, измените тип возвращаемого вами метода на Observable<boolean> и вместо возврата переменной isSignedIn, как вы это сделали, сделайте следующее:

Если ваш вызов API возвращаетнепосредственно логическое:

return this.http.get(this.url + 'api/Authentication/UserInfo');

Если по какой-то причине ваш API не возвращает логическое значение напрямую:

return this.http
           .get(this.url + 'api/Authentication/UserInfo')
           .pipe(result => !!result);

ВозвращаяObservable<boolean> назад мы говорим Angular, что в какой-то момент мы вернем логическое значение , но мы просто не знаем , когда именно это произойдет.Поэтому в этом случае он будет ждать разрешения, прежде чем продолжить.

Answer 2

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

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean>{

return this.http.get(this.url + 'api/Authentication/UserInfo').pipe(map(
  (result) => {
    if (result != null) {
       return true;
    } else {
        this.router.navigate(['sign-in']);
        return false;
     }
  }
 ));
}

Answer 3

API авторизации вызова от canActivate и Promise, который возвращает true или false, можно вернуть из canActivate.