Угловой HttpClient и наблюдаемые

Я пытаюсь написать метод TypeScript для моего веб-приложения Angular, который просто проверяет действительность Токен JWT на сервере с помощью HTTP-звонок.

Я хочу, чтобы этот метод возвращал логическое значение, сообщая вызывающему абоненту, действителен токен или нет. Я пришел с C#, поэтому я ожидал, что смогу сделать что-то подобное, и у меня нет четкого представления о том, как обрабатываются возвраты функций в JS / TS:

verifyCanActivate(): boolean {

const actionUrl = this.apiBaseUrl + 'ValidateToken';

this.http.get(actionUrl)
    .map((data: HttpResponse<any>) => data.status === 200);}

HTTP-перехватчик уже настроен, поэтому каждый запрос, который я делаю, автоматически украшается информацией аутентификации заголовка.

Мое действие на стороне сервера для этого контроллера - это пустой метод ASP.NET Core WebAPI, помеченный атрибутом [Authorize], поэтому я могу легко проверять действительность токенов клиента каждый раз при выполнении вызова.

Как мне написать свой метод TS, чтобы он мог возвращать значение boolean на основе статуса HttpResponse? Я также был бы признателен, если бы вы могли предоставить полезную и актуальную документацию по этой теме в целом.

Заранее спасибо.

Вы хотите вызвать метод синхронно? Или для вас приемлемо изменить способ использования метода, т.е. вызвать его асинхронно? Я спрашиваю, потому что вам, вероятно, будет предложено вернуть наблюдаемое из этого метода.

S.V. 10.08.2018 11:02

кстати, просто из любопытства> зачем вам явная конечная точка проверки проверки JWT, если у вас уже есть перехватчик, который проверяет ваш jwt при каждом вызове конечных точек, украшенных [Authorize]?

dee zg 10.08.2018 11:13

@deezg Есть ли способ интегрировать проверку перехватчика с системой защиты угловой маршрутизации?

mororo 10.08.2018 11:32

зачем вам интегрировать его с угловой маршрутизацией? это 2 отдельные вещи. у вас должно быть какое-то состояние (токен jwt) в вашем приложении (не знаю, используете ли вы ngrx или какое-либо управление состоянием), которое указывает, успешно ли пользователь вошел в систему или нет. эта государственная проверка переходит в режим охраны. затем, полностью разделенные, все ваши вызовы api будут добавлены в заголовок aurhotization и jwt (что происходит в перехватчике). теперь, когда ваша украшенная [Authorize] конечная точка подвергается атаке неавторизованного пользователя (или истек срок действия jwt), она должна возвращать 401. Это то, что вы обрабатываете в перехватчике и перенаправляете на страницу входа.

dee zg 10.08.2018 11:42
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
3
4
105
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

В angular HttpClient вернуть ответ как наблюдаемый. Вы можете определить тип данных наблюдаемого, но в любом случае он возвращает наблюдаемый. поэтому вам нужно изменить тип возвращаемого значения вашего метода следующим образом.

verifyCanActivate(): Observable<boolean> {

Поскольку Observables асинхронны, вы не можете напрямую получить доступ к значениям, возвращаемым с сервера. вам нужно подписаться на наблюдаемое, и только тогда мы сможем получить доступ к данным.

verifyCanActivate().subscribe( (result: boolean) => {
   console.info(result) // the boolean value
})
Ответ принят как подходящий

Ваш метод verifyCanActivate должен возвращать Observable<boolean>, а затем, когда вы его действительно используете (прочтите, подпишитесь на него), вы получите свое логическое значение.

Итак, примерно так:

verifyCanActivate(): Observable<boolean> {

const actionUrl = this.apiBaseUrl + 'ValidateToken';

return this.http.get(actionUrl)
    .map((data: HttpResponse<any>) => data.status === 200);
}

(обратите внимание: возвращение> вы возвращаете наблюдаемый this.http.get)

а затем вы используете его как:

verifyCanActivate().subscribe(responseValue => console.info(returnValue));

Как уже говорилось в других ответах, ваш метод возвращает Observable<boolean>, на который вы можете подписаться. Но чтобы получить статус HttpResponse, вам нужно добавить observe: 'response' HttpOption. В противном случае вы можете просматривать только Response - Body.

verifyCanActivate(): Observable<HttpResponse<any>> {

  const actionUrl = this.apiBaseUrl + 'ValidateToken';

  return this.http.get(actionUrl, { observe: 'response' });
}

И ваша подписка должна быть такой:

verifyCanActivate().subscribe((response: HttpResponse<any>) => 
  response.status === 200
);

Другие вопросы по теме