Angular 4.3 Interceptor无法正常工作

时间:2017-07-31 14:21:43

标签: javascript angular

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

user.service.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

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:

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

3 个答案:

答案 0 :(得分:65)

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

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

答案 1 :(得分:62)

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

app.module.ts

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

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

user.service.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');
  }
}

答案 2 :(得分:0)

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

如果您使用的是providerIn:“ root”,并且您的服务在模块内部。

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

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

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

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