Заголовок авторизации не добавлен в Angular - PullRequest
0 голосов
/ 31 января 2020

Я использую angular для создания веб-приложения. Мое приложение использует токен jwt для аутентификации. Поэтому для всех исходящих запросов я определил перехватчик для добавления заголовка авторизации. Код выглядит следующим образом:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { AuthenticateService } from '../service/authenticate.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(private authenticateService: AuthenticateService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        Authorization: 'Bearer ' + this.authenticateService.getJwtToken()
      }
    });
    return next.handle(request);
  }
}

Мой authenticateService выглядит следующим образом:

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { SignUpUser } from '../model/signUpUser.model';
import { environment } from './../../../environments/environment';
import { map } from 'rxjs/operators';

@Injectable()
export class AuthenticateService {

  constructor(private http: HttpClient) { }

  storeJwtToken(token: string) {
    localStorage.setItem('Authorization', token);
  }

  getJwtToken() {
    return localStorage.getItem('Authorization');
  }

  deleteJwtToken() {
    localStorage.removeItem('Authorization');
  }
}

В моем app.module я добавил перехват в массив поставщиков следующим образом:

import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { TokenInterceptor } from './account/interceptor/token.interceptor';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    },
    AuthenticateService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Я использую ngrx для управления моим приложением состояний, поэтому запрос к серверу выполняется следующим образом:

@Injectable()
export class LibraryEffects {

constructor(private libraryService: LibraryService,
              private userService: UserService,
              private actions$: Actions,
              private router: Router) { }

  @Effect()
  loadLibraries$: Observable<Action> = this.actions$.pipe(
    ofType(libraryActions.LibraryActionTypes.LoadShortLibraries),
    mergeMap(action =>
      this.libraryService.getAllByUser().pipe(
        map(libraries => (new libraryActions.LoadSuccesShortLibraries(libraries))),
        catchError(err => of(new libraryActions.LoadFailShortLibraries(err)))
      )
    )
  );
}

Служба, выполняющая запрос, выглядит следующим образом:

@Injectable({
  providedIn: 'root'
})
export class LibraryService {

  constructor(private http: HttpClient, private authService: AuthenticateService) { }

  getAllByUser(): Observable<ShortLibrary[]> {
    return this.http.get<ShortLibrary[]>(
      environment.apiUrl + '/media/users/' + this.authService.getUserId() + '/libraries')
      // {headers: new HttpHeaders().set('Authorization', `Bearer ${this.authService.getJwtToken()}`)})
      .pipe(map((res: any) => res.content as ShortLibrary[]));
  }
}

Я получаю запрос, в котором отсутствует заголовок авторизации, и я не могу понять, почему. Если я помещаю console.log в перехватчик, я получаю журнал в консоли, поэтому кажется, что мой перехватчик хорошо зарегистрирован и вызывается при выполнении запроса, но заголовок авторизации не установлен.

Есть идеи, почему? Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...