用于身份验证标头的 Angular HTTP 拦截器答案

【问题标题】：Angular HTTP interceptor for Authentication header用于身份验证标头的 Angular HTTP 拦截器
【发布时间】：2020-06-06 00:40:43
【问题描述】：

我必须在每个 HTTP 请求的“授权”标头中放置一个令牌。所以我开发并注册了一个 HttpInterceptor ：

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(public authService: AuthService) {
  }  

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    let modifiedReq;
    const token = this.authService.getToken();

    // we need the heck clone because the HttpRequest is immutable
    // https://angular.io/guide/http#immutability
    if (token) {
      modifiedReq = request.clone();
      modifiedReq.headers.set('Authorization', `Bearer ${token}`);
    }

    return next.handle(modifiedReq ? modifiedReq : request).pipe(tap(() => {
        // do nothing
    },
    (err: any) => {
    if (err instanceof HttpErrorResponse) {
      if (err.status === 0) {
        alert('what the heck, 0 HTTP code?');
      }
      if (err.status !== 401) {
        return;
      }
      this.authService.goToLogin();
    }
  }));
 }
}

但标题似乎永远不会放在发送的请求上。我做错了什么？

此外，有时错误代码“0”会被拦截器捕获；什么意思？

Angular 8.2.11

编辑 1：------------

我也试过这样：

request = request.clone({
            setHeaders: {
                authorization: `Bearer ${token}`
            }
        });

但仍然没有设置标题。此外，该模块已在 app.module 中正确注册

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

编辑 2：------------

查看这张图片...我快疯了。

【问题讨论】：

标签： javascript angular typescript angular-http-interceptors

【解决方案1】：

我错了。在更新克隆请求时，Angular 会将新标头放在名为“lazyUpdate”的字段中，而不是直接放在标头中。由于其他原因，请求失败。

【讨论】：

【解决方案2】：

也许你忘记输入app.module这个：

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

最后部分这样写：

 return next.handle(modifiedReq);

【讨论】：

不，它已正确注册。代码确实传递给该拦截器，但未设置标头。
@gaetatno 如果你执行 console.log(token)，它会打印值或者它是空的还是 null？？
它打印东西
request.headers 似乎没有以我尝试的任何方式设置值
ti 认为问题出在您执行 if(token) 时，因为如果 token 为 null 或为空是正确的，则表明您在标头中没有该值，但如果 token 不为 null，那就奇怪了

【解决方案3】：

这样对我有用：

const headersConfig = {
  'Accept': 'application/json', //default headers
};
...

if (token) {
  headersConfig['Authorization'] = `Bearer ${token}`;
}
...

return next
  .handle(request.clone({
     setHeaders: headersConfig
  }))

【讨论】：

如果你喜欢我展示的，你不需要 modifiedRequest