Блог

У меня есть HttpInterceptor для добавления токена JWT из локального хранилища в заголовки моих http-запросов. Я считаю, что все мои http-запросы отправляются без каких-либо заголовков, но не понимаю, почему это не работает.

Чего мне не хватает, чтобы перехватчик добавлял заголовки к моим запросам?

Мой перехватчик:

 import { Injectable, Injector } from '@angular/core';
import {HttpInterceptor} from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})

export class TokenInterceptorService implements HttpInterceptor {

  constructor(private injector: Injector) { }

  intercept(req, next) {
    let tokenizedReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    })
    return next.handle(tokenizedReq)
  }
}
  

Мой сервис:

 import { baseUrl } from "../environments/environment";
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
@Injectable({
  providedIn: 'root'
})
export class AccountService {

  constructor(private http:HttpClient) { }

  getUser(data):Observable<any>{
    return this.http.post(`${baseUrl}/useraccount/user`, data);
  }

}
  

Вы должны зарегистрировать свой перехватчик, например, в ApplicationModule

 @NgModule({
  imports: [
    HttpClientModule
  ],
  exports: [],
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass: YourInterceptorClass, multi: true},
  ]
})
  

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

Мой перехватчик был таким

 @Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        req = req.clone({
            setHeaders: {
                "Content-Type": "application/json; charset=utf-8",
                Accept: "application/json",
                Authorization: `Bearer ${AuthService.getAccessTokenFromStorage()}`,
            },
        });

        return next.handle(req);
    }
}
  

и в моем внутреннем модуле (например, client.module ) было так

 ...
providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],
...