Я использую 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 в перехватчик, я получаю журнал в консоли, поэтому кажется, что мой перехватчик хорошо зарегистрирован и вызывается при выполнении запроса, но заголовок авторизации не установлен.
Есть идеи, почему? Заранее спасибо.