HttpInterceptor无法在Angular 10中拦截请求

如何解决HttpInterceptor无法在Angular 10中拦截请求

我有一个HttpInterceptor，可将本地存储中的JWT令牌添加到我的http请求的标头中。我相信我发送的所有http请求都没有任何标头，但不明白为什么它不起作用。

我想让拦截器将标头添加到我的请求中是什么？

我的拦截器：

import { Injectable,Injector } from '@angular/core';
import {HttpInterceptor} from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})

export class TokenInterceptorService implements HttpInterceptor {

  constructor(private injector: Injector) { }

  intercept(req,next) {
    let tokenizedReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    })
    return next.handle(tokenizedReq)
  }
}

我的服务：

import { baseUrl } from "../environments/environment";
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
@Injectable({
  providedIn: 'root'
})
export class AccountService {

  constructor(private http:HttpClient) { }

  getUser(data):Observable<any>{
    return this.http.post(`${baseUrl}/useraccount/user`,data);
  }

}

解决方法

您必须在ApplicationModule中注册拦截器

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

,

不久前我遇到了同样的问题，我意识到我的应用程序中有几个模块。所以把拦截器放在我试图拦截的模块中，而不是放在 app 模块中，它起作用了！

我的拦截器是这样的

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
        req = req.clone({
            setHeaders: {
                "Content-Type": "application/json; charset=utf-8",Accept: "application/json",Authorization: `Bearer ${AuthService.getAccessTokenFromStorage()}`,},});

        return next.handle(req);
    }
}

在我的内部模块（例如，client.module）中是这样的

...
providers: [{ provide: HTTP_INTERCEPTORS,useClass: AuthInterceptor,multi: true }],...