Javascript Angular 4.3 拦截器不工作

Angular 4.3 Interceptor not working

提问by Kirill Ivanov

I try to use new Angular 4.3interceptors for setting authorithation header for all requests. However, it is not working. I set breakpoint into the interceptors interceptmethod and browser did not hit it, so it seems like angularjust ignores my interceptor. Please help me, thanks in advance.

我尝试使用新的Angular 4.3拦截器为所有请求设置授权标头。但是，它不起作用。我在拦截器intercept方法中设置了断点并且浏览器没有命中它，所以它似乎angular只是忽略了我的拦截器。请帮助我，提前致谢。

user.service.ts:

用户服务.ts：

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";
import {Http} from "@angular/http";

@Injectable()
export class UserService {

  constructor(public http: Http) {
  }

  public getContacts(): Observable<any[]> {
    return this.http.get('/users/contacts').map(contacts => contacts.json());
  }
}

token.interceptor.ts

token.interceptor.ts

import {Injectable} from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {AuthService} from "./shared/auth.service";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}

app.module.ts:

app.module.ts:

@NgModule({
  ...
  providers: [
    ...
    {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
  ]
})

回答by Micha? Chilczuk

TL;DRMake sure there is one import of the HttpClientModule in the entire app (recommened) or provide valid interceptor configuration for each one (ofc for testing only).

TL;DR确保在整个应用程序中有一个 HttpClientModule 的导入（推荐）或为每个提供有效的拦截器配置（ofc 仅用于测试）。

Make sure that HttpClientModule is not imported multiple times across different modules of the app. I had it imported in lazy loaded modules. Each import creates a new copy of HttpClient using configuration from the module where it is imported, so interceptors provided in a root module are overwritten.

确保 HttpClientModule 不会跨应用程序的不同模块多次导入。我将它导入到延迟加载的模块中。每次导入都会使用导入它的模块中的配置创建 HttpClient 的新副本，因此根模块中提供的拦截器将被覆盖。

回答by Maxim Kuzmin

The reason - you use old Httpservice instead of new service, introduced in Angular 4.3- HttpClient(Httpis going to be deprecated). Also, in the HttpClientJSON response type is assumed by default, so you should ommit .map(contacts => contacts.json()).

原因 - 您使用旧Http服务而不是新服务，引入Angular 4.3- HttpClient(Http将被弃用)。此外，HttpClient默认情况下假定 JSON 响应类型，因此您应该省略.map(contacts => contacts.json()).

app.module.ts

app.module.ts

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   HttpClientModule,
   ...
 ],
 providers: [
   ...
   {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
 ]
 ...
})

user.service.ts

用户服务.ts

...
import {HttpClient} from "@angular/common/http";

@Injectable()
export class UserService {

  constructor(public http: HttpClient) {
  }

  public getContacts(): Observable<any[]> {
    return this.http.get('/users/contacts');
  }
}

回答by Ramón Casares

If you have already check that you are using the HttpClient service and you olny import HttpClientModule once but you still have problems check this:

如果您已经检查过您是否正在使用 HttpClient 服务并且您只导入了一次 HttpClientModule 但您仍然遇到问题，请检查以下内容：

If you are using providedIn: 'root' and your service is inside a module.

如果您使用 providedIn: 'root' 并且您的服务在模块内。

@Injectable({
  providedIn: 'root'
})
export class YourService {
    ...
}

Make sure that you haven't added the service in the providers array of your module.

确保您没有在模块的 providers 数组中添加服务。

@NgModule({
  ...
  providers: [
    YourService, // REMOVE THIS LINE
  ]
})
export class YourModule { }

That will overwrite your interceptors for that service.

这将覆盖该服务的拦截器。