Angular HTTP перехватчик для заголовка аутентификации

Question

Я должен поместить токен в заголовок «Авторизация» для каждого HTTP-запроса. Поэтому я разработал и зарегистрировал HttpInterceptor:

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(public authService: AuthService) {
  }  

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    let modifiedReq;
    const token = this.authService.getToken();

    // we need the heck clone because the HttpRequest is immutable
    // https://angular.io/guide/http#immutability
    if (token) {
      modifiedReq = request.clone();
      modifiedReq.headers.set('Authorization', `Bearer ${token}`);
    }

    return next.handle(modifiedReq ? modifiedReq : request).pipe(tap(() => {
        // do nothing
    },
    (err: any) => {
    if (err instanceof HttpErrorResponse) {
      if (err.status === 0) {
        alert('what the heck, 0 HTTP code?');
      }
      if (err.status !== 401) {
        return;
      }
      this.authService.goToLogin();
    }
  }));
 }
}

Но заголовок, похоже, никогда не ставится на отправленный запрос. Что я делаю не так?

Кроме того, иногда перехватчик получает код ошибки '0'; что это значит?

Angular 8.2.11

РЕДАКТ. 1: --------------------- ---

Я также пытался так:

request = request.clone({
            setHeaders: {
                authorization: `Bearer ${token}`
            }
        }); 

, но заголовок все еще не был установлен. Также модуль правильно зарегистрирован в app.module

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

EDIT 2: ------------------------

Проверьте это изображение ... Я схожу с ума.

Answer 1

Это работает для меня так:

const headersConfig = {
  'Accept': 'application/json', //default headers
};
...

if (token) {
  headersConfig['Authorization'] = `Bearer ${token}`;
}
...

return next
  .handle(request.clone({
     setHeaders: headersConfig
  }))

Answer 2

Я был не прав. При обновлении запроса на клонирование angular будет помещать новые заголовки в поля с именем " lazyUpdate ", а не непосредственно внутри заголовков. Запросы не выполнялись по другим причинам.

Answer 3

может быть, вы забудете вставить app.module в это:

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

в заключительной части напишите так:

 return next.handle(modifiedReq);