Angular 6个Jwt拦截器

Question

我正在尝试使用 Angular 6 实现 JWT 拦截器。出于某种原因，拦截器没有向我的服务器请求添加授权 header。我在 JWTInterceptor 提供程序 class 和所有内容中登录了控制台，但似乎根本没有调用 class，即使我已将它添加到我的 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 { }

Answer 2

我找到问题了。对于任何可能感兴趣的人，这就是解决方案。在我的服务中，我从 http 库而不是 HttpClient 模块导入 http。所以不要像

这样导入

import { http } from '@angular/http'

我需要做的：

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

最后我需要更改我的构造函数参数：

constructor(){http: http}

到

constructor(){http: HttpClient}

Angular 6个Jwt拦截器

Angular 6 JwtInterceptor

interceptor

jwt

angular

angular6