Как мы можем получить веб-токен Json через angular?

У меня есть служба отдыха в приложении загрузки Spring.

У меня есть метод, который принимает имя пользователя и пароль как данные json и проверяет эти данные, если они верны, тогда сервис возвращает токен JWT.

Как мы можем получить веб-токен Json через angular?

Когда я вызываю этот метод через angular, я не могу получить токен авторизации и дважды запросить отправку.

Как мы можем получить веб-токен Json через angular?

Зачем запрашивать отправку дважды и как получить токен в angular?

import {Component, OnInit} from '@angular/core';
import {Payment} from './Payment';
import {HttpClient, HttpResponse} from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  title = 'Home';
  constructor(private http: HttpClient) {
  }

  ngOnInit() {

    this.http.post('http://localhost:8084/login', JSON.stringify({ username: 'mehman', password: 'mehman' }), { observe: 'response' })
      .subscribe((response: HttpResponse<any>) => { console.info(response); });
  }
}

Пожалуйста, отправьте сервисный код и код компонента. Так мы сможем лучше понять вашу проблему и предложить решение.

baj9032 25.06.2018 08:51

Вероятно, проблема CORS

David 25.06.2018 08:53

Я добавляю @CrossOrigin в свой метод отдыха для этой проблемы => Access-Control-Allow-Origin

MehmanBashirov 25.06.2018 08:55

Да, но именно поэтому запрос отправляется дважды. Один раз для OPTIONS, один раз для POST. И я думаю, что заголовки в ответе загружаются лениво, поэтому вам нужно получить к ним доступ, чтобы увидеть, как они отображаются.

David 25.06.2018 09:19

Как я могу предотвратить двойной запрос? Я не могу понять ваш второй подход.

MehmanBashirov 25.06.2018 09:21

Я добавил токен в тело ответа в источнике генерации токенов, как показано ниже. res.getWriter (). append ("{\" токен \ ": \" "+ TOKEN_PREFIX +" "+ JWT +" \ "}"); Как я могу предотвратить двойную отправку запроса?

MehmanBashirov 25.06.2018 09:35
Тестирование функциональных 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
1
6
70
1

Ответы 1

см. ниже решение, которое вы можете сослаться и сравнить с вашим кодом для решения https://blog.angular-university.io/angular-jwt-authentication/

https://www.toptal.com/web/cookie-free-authentication-with-json-web-tokens-an-example-in-laravel-and-angularjs

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