Working on Angular 13, I am trying to attach a JWT token to the headers in order to access a restricted route on the backend. However, after inspecting the backend, it seems that the JwtInterceptor is not modifying the HTTP request headers.
I have included the HttpClientModule only once in my project, specifically in the root AppModule. To debug the issue, I added a pipe function with error handling to the next object within the interceptor based on a suggestion from a similar problem on SO, but it did not provide any solution.
I even went as far as adding console.log statements within the file, however, there was no output, which leads me to believe that the interceptor might not be firing at all.
I have previous experience working with interceptors and never encountered this issue before, so I am puzzled. The main difference here is that I am dealing with an Angular PWA. My understanding was that a service worker should not interfere with the behavior of an interceptor. Could a POST request trigger a "cache busting" event?
Could the error lie in the implementation of the PWA? Despite following the documentation, I cannot rule out the possibility.
The attachments include the App Module, Jwtinterceptor, and the "Barrel" of HttpInterceptors. I intend to add more interceptors to the project and hence followed the suggestion in the docs to create a Barrel.
TL;DR
The HttpInterceptor (JwtInterceptor) does not seem to be functioning at all. This approach has worked for me in past projects, the only variation being the use of a PWA in this particular project. Unsure if there is a conflict or peculiar aspect related to PWA implementation. HttpClientModule is present only once in the project.
app.module.ts
//Angular level imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
// Rest of the imports...
@NgModule({
declarations: [
AppComponent,
HomeComponent,
HeaderComponent,
// Other components...
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
AngularMaterialModule,
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production,
registrationStrategy: 'registerWhenStable:30000',
}),
HttpClientModule,
RouterModule,
],
providers: [httpInterceptorProviders],
bootstrap: [AppComponent],
})
export class AppModule {}
jwt.interceptor.ts
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { environment } from '@environments/environment';
import { AccountService } from '@app/_services/account.service';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
constructor(private accountService: AccountService) {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
const user = this.accountService.currentUserValue;
const isLoggedIn = user && user.jwt;
const isApiUrl = request.url.startsWith(environment.apiUrl);
if (isLoggedIn && isApiUrl) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${user.jwt}`,
},
});
}
return next.handle(request);
}
}
index.ts - "Barrel" file
/* "Barrel" of Http interceptors */
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { JwtInterceptor } from './jwt.interceptor';
/* Http interceptor providers in outside-in order */
export const httpInterceptorProviders = [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
];
Post request Headers https://i.sstatic.net/bAHVm.png