Angular JWT: Заголовок авторизации пуст?

Question

После этого учебного пособия Я хотел реализовать функцию входа в мое приложение Angular, которое взаимодействует с бэкэндом, созданным в Spring Boot, и в бэкэнде используется безопасность Spring.

Проблема очевидна: где-то в моей программе заголовок авторизации добавлен неправильно

В моем jwt.interceptor.ts Я включил несколько команд conole.log, чтобы увидеть, в чем проблема:

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

  constructor(private authenticationService: AuthenticationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let currentUser = this.authenticationService.currentUserValue;
    console.log(currentUser);
    console.log(request.headers);
    if (currentUser) {
      // token exists on user so we take the request and add an Authorization header with the jwt token so we keep access
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}` //basically what I do in postman to get access
        }
      });
    }
    return next.handle(request);
  }
}

И когда я проверяю консоль, странным образом экземпляр currentUser, похоже, имеет токен jwt для своего тела, но когда я попробуйте распечатать его поле токена (которое определено в его классе), это поле не определено

И в то время как есть заголовок авторизации, добавленный к В запросе значение Bearer не определено

То, что происходит в моей службе авторизации (authorization.service.ts), называется объектом с ключом currentUser. из локального хранилища и его значение возвращается. Это сохраняется при входе в систему - мы берем пользователя из конечной точки / authenticate JSON .stringify и сохраняем его в локальной строке. Тогда при получении currentUserValue я получаю его поле .value:

  constructor(private httpClient: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser'))); // user from json
    this.currentUser = this.currentUserSubject.asObservable();
  }

.......

public get currentUserValue(): User {
    return this.currentUserSubject.value;
  }

Как мне сделать так, чтобы токен был правильно добавлен в мой заголовок авторизации?

Я нашел не очень -приличное решение этого:

В auhentication.service сделайте это в конструкторе (и добавьте поле также в класс):

  constructor(private httpClient: HttpClient) {
    this.tokenString = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('currentUser'))).value.jwt;
  }

затем вызовите access для этого поля при настройке авторизации заголовок. По крайней мере, это решает эту проблему. Если есть какое-то лучшее решение, я бы хотел знать.

Вот лучшее решение этой проблемы:

Сначала добавьте строковое поле с именем jwt в свой пользовательский класс, затем сделайте это в конструкторе, потому что currentUser может быть вызван только один раз:

  constructor(private httpClient: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
    this.tokenString = this.currentUserSubject.value.jwt;
    this.currentUser = this.currentUserSubject.asObservable();
  }

Answer 1

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

request = request.clone({
  headers: new HttpHeaders({
    Authorization: `Bearer ${currentUser.token}`
  })
});

Answer 2

Попробуйте, как это, в токене консоли, доступном в ключе jwt, и вы получаете доступ с помощью клавиши token

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

  constructor(private authenticationService: AuthenticationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let currentUser = this.authenticationService.currentUserValue;
    console.log(currentUser);
    console.log(request.headers);
    if (currentUser) {
      // token exists on user so we take the request and add an Authorization header with the jwt token so we keep access
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentUser.jwt}` //basically what I do in postman to get access
        }
      });
    }
    return next.handle(request);
  }
}