Question

我尝试使用新的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}
  ]
})

Answer 1

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

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

Answer 2

原因 - 您使用旧的Http服务而不是Angular 4.3中引入的新服务 - HttpClient（Http将被弃用）。此外，默认情况下，在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');
  }
}

Answer 3

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

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

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

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

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

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

Angular 4.3 Interceptor无法正常工作

3 个答案: