Http拦截器在角度6中不起作用答案

【问题标题】：Http Interceptor not working in angular 6Http拦截器在角度6中不起作用
【发布时间】：2018-09-18 19:23:55
【问题描述】：

在我的 Angular 6 项目中，我使用 httpintercept 处理数据服务中的 401（未经授权）错误。但 httpintercept 服务未纳入我的项目。

这是我的 intercept.services.ts 文件

export class InterceptService  implements HttpInterceptor {

  constructor(private authService: AuthService) { }

  // intercept request and add token
    intercept(request: HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>> {

      // modify request
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${JSON.parse(localStorage.getItem('currentUser')).token}`
        }
      });

       console.log("----request----");

     console.log(request);

     console.log("--- end of request---");


      return next.handle(request)
      .pipe(
          tap(event => {
            if (event instanceof HttpResponse) {

              console.log(" all looks good");
              // http response status code
              console.log(event.status);
            }
          }, error => {
           // http response status code
              console.log("----response----");
              console.error("status code:");
              console.error(error.status);
              console.error(error.message);
              console.log("--- end of response---");

          })
        )

    };


}

这是我常用的service.ts页面

 import { Injectable } from '@angular/core';
    import { Observable, Subject } from 'rxjs';
    import {Http, Response,Headers ,RequestOptions } from "@angular/http";
    import { HttpModule} from '@angular/http';
    import { map } from 'rxjs/operators';
    import { Router } from '@angular/router';

     const API_URL   =  '//api path';



    @Injectable({
        providedIn: 'root'
    })
    export class DataService {
        ctrURL:any;
        postData:any;
        ajaxdata:any;

        constructor(private http:Http,private router: Router) { }
        get_data(url,auth=true){
            //......url : url path......
            //....auth : true api auth required,false no api required....
            var get_url = API_URL + url;
            var headers = new Headers();
            headers.append('Content-Type', 'application/json');
            headers.append('Accept', 'application/json');
            if(auth==true){
                var localStore =    JSON.parse(localStorage.getItem('currentUser'));
                headers.append("Authorization", "Bearer " + localStore.token);
            }
            let options = new RequestOptions({ headers });
            return this.http.get(get_url, options) .pipe((map(res => res.json())));
        }


    }

【问题讨论】：

您的问题是什么？请具体说明问题
我在拦截器中写了一些console.log....但是调用api后没有任何反应
你是providing the interceptor吗？
是的，我提供了提供者：[InterceptService, { provide: HTTP_INTERCEPTORS, useClass: InterceptService, multi: true } ],

标签： angular angular6

【解决方案1】：

对于 Angular 4.3+ 及更高版本，您必须使用 HttpClient 而不是 Http。

拦截器使用HttpClient 而不是Http。

所以改用下面的导入：

import { HttpClient, HttpHeaders } from '@angular/common/http';

在构造函数中：

constructor(private http:HttpClient,private router: Router) { }

有关 Http 和 HttpClient 的更多信息，请参阅 this 答案。

【讨论】：