Угловой 6 jwtinterceptor

Я пытаюсь реализовать перехватчик JWT с помощью Angular 6. По какой-то причине перехватчик не добавляет заголовок авторизации к моим запросам сервера. У меня консоль вошла в класс поставщика JWTInterceptor и все остальное, и не похоже, что класс вообще вызывается, хотя я добавил его в список поставщиков в моем AppModule. По сути, кажется, что мой перехватчик полностью невидим или что HTTP_INTERCEPTORS не работает.

./_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 { }

Мои угловые зависимости package.json

 "@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",

Мои спецификации заголовка app.ts express

  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
0
2 392
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам необходимо указать свой JwtInterceptor в AppModule. Прежде всего, импортируйте HTTP_INTERCEPTORS:

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

... затем укажите JwtInterceptor в ваших поставщиках модулей.

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

Я знаю, что это звучит очень глупо, но у меня действительно есть провайдер HTTP_INTERCEPTOR, включенный в мой appModule. Я просто забыл добавить сюда! Тем не менее, спасибо за помощь!

Alex Hughes 10.08.2018 16:28

Вы должны перепроверить вопросы в будущем, прежде чем публиковать :)

Faisal 10.08.2018 16:29
Ответ принят как подходящий

Я понял проблему. Для всех, кому это может быть интересно, это решение. В моем сервисе я импортировал http из библиотеки http вместо модуля HttpClient. Поэтому вместо того, чтобы импортировать как

import { http } from '@angular/http'

Мне нужно сделать:

import { HttpClient } from '@angular/common/http'

И, наконец, мне нужно было изменить параметр конструктора с:

constructor(){http: http} 

к

constructor(){http: HttpClient}

Другие вопросы по теме