title: Angular 6 - Auth token interceptor not adding headers
body: <p>Using Angular 6, I have tried many different approaches over the last two days, with the latest riffing off of this post: <a href="https://stackoverflow.com/a/47401544">https://stackoverflow.com/a/47401544</a>.  However, the header is still not being set on requests.</p>
  
  <pre><code>import {Inject, Injectable} from '@angular/core';
  import {
    HttpEvent,
    HttpInterceptor,
    HttpHandler,
    HttpRequest,
    HttpErrorResponse,
  } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  
  @Injectable()
  export class AuthTokenInterceptor implements HttpInterceptor {
    constructor() {}
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next.handle(req).do((event: HttpEvent&lt;any&gt;) =&gt; {
        if (localStorage.getItem('id_token') != null) {
          // Clone the request to add the new header.
          const request = req.clone({
            setHeaders: {
              'Content-Type' : 'application/json; charset=utf-8',
              'Accept'       : 'application/json',
              'Authorization': `Bearer ${localStorage.getItem('id_token')}`
            }
          });
          return next.handle(request);
        }
      }, (err: any) =&gt; {
        if (err instanceof HttpErrorResponse) {
          if (err.status === 401) {
            console.log('redirect auth interceptor')
            // do a redirect
          }
        }
      });
    }
  }
  </code></pre>
  
  <p>If I log out <code>request</code>, the <code>request.headers.lazyUpdate</code> array is being updated with 3 items, but I don't see the <code>Authorization</code> header in the request it's intercepting.</p>
  
  <p><code>request.headers.lazyUpdate</code>:</p>
  
  <pre><code>{name: "Content-Type", value: "application/json; charset=utf-8", op: "s"}
  {name: "Accept", value: "application/json", op: "s"}
  {name: "Authorization", value: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2Mzh9.tLTmPK46NhXSuqoCfZKgZcrQWzlNqLMI71-G0iy3bi8", op: "s"}
  </code></pre>
  
  <p>(<code>request.headers.headers</code> is empty---could this be the problem?)</p>
  
  <p>app.module.ts:</p>
  
  <pre><code>providers: [
      {provide: HTTP_INTERCEPTORS, useClass: AuthTokenInterceptor, multi: true},
    ],
  </code></pre>
  
  <p>What leads me to think it's an interceptor issue is that if I manually add the headers to the request, I don't get a <code>401</code> and the request returns the proper data and a <code>200</code>:</p>
  
  <pre><code>return this.http.get(environment.API_URL + 'list/supervise/' + encodeURIComponent(id),
        {headers: new HttpHeaders().set('Authorization', `Bearer ${localStorage.getItem('id_token')}`)}).pipe(
          map((res: any) =&gt; res.data)
      );
  </code></pre>
  
  <p>Is there anything I may be overlooking?  Thanks.</p>
  
  <p>EDIT:</p>
  
  <p>As I mention in a comment below, I was returning <code>next.handle</code> twice.  This is the solution I ended up going with:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {
    HttpEvent,
    HttpInterceptor,
    HttpHandler,
    HttpRequest
  } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class AuthTokenInterceptor implements HttpInterceptor {
    constructor() {}
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      const token = localStorage.getItem('id_token');
  
      req = req.clone({
        setHeaders: {
          'Authorization': `Bearer ${token}`
        },
      });
  
      return next.handle(req);
    }
  }
  </code></pre>