Clash Royale CLAN TAG#URR8PPP

Angular 6 JwtInterceptor

I am trying to implement a JWT interceptor using Angular 6. For some reason, the interceptor is not adding the Authorization header to my server requests. I have console logged in the JWTInterceptor provider class and everything, and it doesn't seem like the class is being called at all, even though I've added it to the Providers list in my AppModule. Basically, it seems like my interceptor is completely invisible, or that HTTP_INTERCEPTORS is not working.

./_helpers/jwt.interceptor.ts

import Injectable from '@angular/core';
import HttpRequest, HttpHandler, HttpEvent, HttpInterceptor from
'@angular/common/http';
import Observable from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor
intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>>
// add authorization header with jwt token if available
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (currentUser && currentUser.token)
request = request.clone(
setHeaders:
Authorization: `Bearer $currentUser.token`

);


return next.handle(request);




app.module.ts

import BrowserModule from '@angular/platform-browser';
import NgModule from '@angular/core';

import AppComponent from './app.component';
import HttpModule from '@angular/http';
import HttpClientModule, HTTP_INTERCEPTORS from '@angular/common/http';
import BrowserAnimationsModule from '@angular/platform-
browser/animations';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import NounService from './noun.service';
import NojqueryComponent from './nojquery.component'
import AppRoutingModule from './app-routing.module';

import FaderComponent from './fader.component';

import AngularMaterialModule from './angular-material.module';

@NgModule(
declarations: [
AppComponent,
FaderComponent,
NojqueryComponent

],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
BrowserAnimationsModule,
AngularMaterialModule,

],
providers: [
NounService,

provide: HTTP_INTERCEPTORS,
useClass: JwtInterceptor,
multi: true


],
bootstrap: [AppComponent]
)
export class AppModule


My package.json angular dependencies

"@angular/animations": "^6.1.0",
"@angular/cdk": "^6.4.1",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.1",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",


My app.ts express header specs

this.app.all('/*', function(req, res, next)
res.header("Access-Control-Allow-Origin", "http://localhost:4200");
res.header("Access-Control-Allow-Credentials", true);
res.header("Access-Control-Allow-Headers", "*");
next();
);


2 Answers
2

You need to provide your JwtInterceptor in AppModule. First of all, import the HTTP_INTERCEPTORS:

JwtInterceptor

AppModule

HTTP_INTERCEPTORS

import HTTP_INTERCEPTORS from '@angular/common/http';


... then provide JwtInterceptor in your module providers.

JwtInterceptor

@NgModule(
providers: [
NounService,
[
provide: HTTP_INTERCEPTORS,
useClass: JwtInterceptor,
multi: true
],
],
bootstrap: [AppComponent]
)
export class AppModule


I have figured out the problem, for anyone who may be interested. In my service I was importing http from the http library, instead of the HttpClient module. So instead of importing like

import http from '@angular/http'

I need to do:

import HttpClient from '@angular/common/http'

And finally I needed to change my constructor parameter from:

constructor()http: http

to

constructor()http: HttpClient

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.