Angular 5 http拦截器不拦截

Question

我在本地存储中存储了一个正确的 JWT 令牌和一个我公然从教程中复制的拦截器。但是，它不会拦截请求并将 header 添加到请求中。

这是我提出请求的地方：

https://github.com/Marred/Informakcja/blob/master/Informakcja-client/src/app/services/information.service.ts

这是拦截器：

https://github.com/Marred/Informakcja/blob/master/Informakcja-client/src/app/services/token.interceptor.ts

和我的应用程序模块 - 我很确定它已正确导入：

https://github.com/Marred/Informakcja/blob/master/Informakcja-client/src/app/app.module.ts

当我发出请求时，我希望拦截器记录我指定的控制台消息并将令牌添加到 header，但它并没有这样做，我也不知道为什么：/我用网上找到的其他一些教程检查了代码，没有发现任何能够破坏我的代码的差异。我也没有足够的 Angular 经验来正确调试它。

如有任何帮助，我们将不胜感激。

Answer 1

你在这里做错了几件事：

拦截器与 HttpClientModule 一起使用，而不是与 HttpModule 一起使用。您正在使用 HttpModule。您需要更改为 HttpClientModule

在 app.module.ts

HttpClientModule

在您的 authentication.service.ts 中导入 HttpClient 并在其构造函数中引用它。

参考以下代码：

  //app.module.ts
    import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
    .
    .
    .
    @NgModule({
      declarations: [
        AppComponent,
       .
       .
       .
      ],
      imports: [
        BrowserModule,
        .
        .
        .,
        HttpClientModule, //add here
        RouterModule.forRoot([
          { path: '', redirectTo: 'home', pathMatch: 'full' },
          { path: 'home', component: HomeComponent },
          { path: 'login', component: LoginComponent },
          { path: 'register', component: RegisterComponent },
          { path: 'add-information', component: AddInformationComponent },
          { path: '**', redirectTo: 'home' }
        ], { useHash: true })
      ],
      providers: [
        { provide: 'BASE_URL', useValue: 'https://some URL/' },
        UserService,
        InformationService,
        AuthenticationService,
        AlertService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: TokenInterceptor,
          multi: true
        }
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

和

//information.service.ts and authentication.service.ts

import { Injectable, Inject } from '@angular/core';
import { HttpClient} from '@angular/common/http'; //added import
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class InformationService {

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) { } //made changes in cunstructor

  add(link: string, title: string, description: string) {
    return this.http.post(this.baseUrl + 'api/Information', { link: link, title: title, description: description })
    .map((response: Response) => {
        console.log(response);
    });
  }
}

在 authentication.service.ts

中进行类似更改

Angular 5 http拦截器不拦截

Angular 5 http interceptor not intercepting

javascript

typescript

angular-http-interceptors

angular