拦截器未触发

Question

我创建了一个角形的拦截器，但是它不起作用。这是我到目前为止所拥有的

拦截器：

import { Injectable } from '@angular/core';
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('inter');
    req = req.clone({
      setHeaders: {
        Authorization: 'Bearer xx.yy.zz',
      },
    });
    return next.handle(req);
  }
}

应用模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CuencasComponent } from './cuencas/cuencas.component';
import {InterceptorService} from './interceptor.service';
import {CuencasService} from './cuencas/cuencas.service';

@NgModule({
  declarations: [
    AppComponent,
    CuencasComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    CuencasService,
    {
      provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件：

import { Component, OnInit } from '@angular/core';
import {CuencasService} from './cuencas.service';

@Component({
  selector: 'app-cuencas',
  templateUrl: './cuencas.component.html',
  styleUrls: ['./cuencas.component.css']
})
export class CuencasComponent implements OnInit {

  constructor(private cuencas: CuencasService) { }

  ngOnInit() {
    this.cuencas.getCuencas().subscribe(
        res => this.cuencas = res,
        err => console.log(err)
    );
  }

}

服务：

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';

@Injectable()
export class CuencasService {

  private urlEndPoint = 'http://localhost:8080/cuenca/';

  constructor(private http: HttpClient) { }

  getCuencas(): Observable<any> {
    return this.http.get(this.urlEndPoint)
      .pipe(map(
        results => results,
      ));
  }
}

当我执行应用程序时，将调用拦截器，但它不会更改标头。在图像中，标题Authorization未替换。

根据我的理解，拦截器必须正常工作，请您帮忙。

Answer 1

您可能想尝试附加标题：

 newReq = req.clone({
          headers: req.append("Authorization", 'Bearer xx.yy.zz')
      },
    });
 return next.handle(newReq);

这是因为我不确定是否需要其他头来执行正确的调用

Answer 2

const TOKEN_HEADER_KEY = 'Authorization';

@Injectable()
export class InterceptorService implements HttpInterceptor {

    constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
    let authReq = req;
//get the token from where you saved it (LocalStorage or SessionStorage)
    const token = this.token.getToken();
    if (token != null) {
        authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });
    }
    return next.handle(authReq);
  }
}

尝试像这样更改拦截器。