Angular 6 Jwt拦截器

Question

我正在尝试使用 Angular 6 实现 JWT 拦截器。由于某种原因，拦截器没有将 Authorization header 添加到我的服务器请求中。我已经在 J​​WTInterceptor 提供程序类和所有内容中登录了控制台，而且该类似乎根本没有被调用，即使我已将其添加到我的 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 依赖项

 "@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 表达 header 规范

  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();
    });

Answer 1

您需要在AppModule中提供您的JwtInterceptor。首先，导入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 { }