我try 使用新的Angular 4.3个拦截器为所有请求设置authorithation头.然而,它不起作用.我在interceptors 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 拦截器.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);
  }
}

应用程序.单元ts:

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

推荐答案

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

应用程序.单元ts

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

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

使用者服务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');
  }
}

Angular相关问答推荐

使用注入的主机组件进行指令测试

RXJS运算符用于combineLatest,不含空值

在状态更新后是否会再次触发ngrx效果?

Change上的Angular 自定义控件无法正常工作

无法绑定到appendTo,因为它不是p-confirmPopup的已知属性

当项目具有BrowserAnimationsModule时,Angular UI未拾取数据模型更改

如何以Angular 解析表单控件名称的无值访问器?

将 injectiontoken 用于 Angular 中的模块特定设置

Angular:try 在点击次数后禁用按钮

为什么 HttpParams 在 Angular 4.3 中的多行中不起作用

单选按钮的Angular2 Reactive Forms formControl

Angular2 路由 VS ui-router-ng2 VS ngrx 路由

模块AppModule导入的意外指令LoginComponent,请添加@NgModule 注释

无法从模块it was neither declared nor imported导出服务

如何设置背景 colored颜色 IONIC 4

MatToolbar 与 Angular 9 一起使用时抛出错误

*ngIf 带有多个异步管道变量

Angular 2 输出到router-outlet

缺少带有Angular的语言环境XXX的语言环境数据

如何在 Angular 4 中翻译 mat-paginator?