在特定 api 调用的情况下如何阻止拦截器覆盖授权标头答案

【问题标题】：How to stop Interceptor from overwriting authorization header in case of a particular api call在特定 api 调用的情况下如何阻止拦截器覆盖授权标头
【发布时间】：2019-03-22 17:34:07
【问题描述】：

如何阻止拦截器覆盖授权标头。我的应用程序中有一个通用拦截器除了手动为每个 http 请求放弃拦截器和发送标头之外，这个问题的解决方案是什么

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        Authorization: `Bearer ${localStorage.getItem('access_token')}`
      }
    });
    return next.handle(req);
  }
}

我有一个 API，它提供了另一个访问令牌，每当用户转到 CleaningComponent 时，我都需要在标头中发送它，但它会被拦截器在本地存储中的令牌覆盖。旁注：拦截器在 CleanComponent 中为某些 api 调用发送所需的访问令牌本地存储，因此我无法从该组件完全关闭它。

export class CleaningComponent implements OnInit {
  chosenFile = null;
  elcUserDetail: any;
  access_token: any;

  constructor(private auth: AuthService, private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.data.subscribe((data: any)=> {
      this.elcUserDetail = data.elcUserDetailResolver.body.data;
      this.access_token = this.elcUserDetail.access_token;
      console.log(this.access_token);
    })
    setTimeout(() => {
      this.auth.uploadListCleaningFile(this.access_token).subscribe((res: any)=>{
        console.log(res);
      },(err: any)=>{
        console.log(err);
      });
    }, 1000);
  }

我设置新标头的身份验证服务

uploadListCleaningFile(token: any) {
      const headers = new HttpHeaders({
        'Authorization': 'Bearer ' + token
      });
      console.log(headers);
      return this.http.post(this.uploadListCleaningFileApi, null, {headers: headers});
    }

【问题讨论】：

标签： angular

【解决方案1】：

您可以在添加新标头之前检查标头是否存在，如下所示：

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {


    const headersToAppend = {};

    // Here check if the request has the header already
    if(!req.headers.has('Authorization')){
       headersToAppend['Authorization'] =  `Bearer ${localStorage.getItem('access_token')}`
    }

    req = req.clone({
      setHeaders: headersToAppend
    });
    return next.handle(req);
  }
}

【讨论】：

【解决方案2】：

@cupusasa 只需从 localStorage 中检查您不想设置 auth token 的 url。

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
     if (req.url == "specificURL") {
        req = req.clone({
           headers: {
           "Content-Type": "application/json"
         }
      });
     } else {
        req = req.clone({
         headers: {
         Authorization: `Bearer ${localStorage.getItem('access_token')}`
        }
      });
     }
    return next.handle(req);
  }
}

【讨论】：