title: How to set default headers on outgoing requests, when the interceptor runs before a value is emitted from a service
body: <p>I have issue passing a token from POST response in <code>auth.service.ts</code> into a HttpInterceptor and set the token in the authorization header.
  As I understand an interceptor runs before any HTTP requests, intercepts, modify and return a cloned version.</p>
  
  <p>But my header isn't getting updated. The interceptor just returns the default value of <code>tokenSubject$</code> which is <code>null</code>, before the auth.service have run and the new value of the BehaviorSubject has been emitted.</p>
  
  <p><strong>brower console</strong></p>
  
  <pre><code>interceptor null
  auth.service.ts:19 {token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."}
  auth.service.ts:21 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
  </code></pre>
  
  <p><strong>Raw headers</strong></p>
  
  <pre><code>Host: localhost:3000
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0
  Accept: application/json, text/plain, */*
  Accept-Language: en-US,en;q=0.5
  Accept-Encoding: gzip, deflate
  Referer: http://localhost:4200/login
  Authorization: Bearer null
  Content-Type: application/json
  Content-Length: 52
  Origin: http://localhost:4200
  DNT: 1
  Connection: keep-alive
  </code></pre>
  
  <p>How am I supposed to add a token to an Authorization header?</p>
  
  <hr>
  
  <p><strong>auth.service.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService {
    tokenSubject$ = new BehaviorSubject(null);
  
    constructor(private httpClient: HttpClient) {}
  
    login(userEmailAndPassword: { email: string, password: string }) {
      return this.httpClient
        .post&lt;{ token: string }&gt;('http://localhost:3000/users/login', userEmailAndPassword)
        .subscribe(user =&gt; {
          console.log(user); // { token: "eyJhbGciOiJIUzI..." }
          this.tokenSubject$.next(user.token);
          console.log(this.tokenSubject$.value); // "eyJhbGciOiJIUzI..."
        });
    }
  }
  </code></pre>
  
  <p><strong>jwt-interceptor.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { Injectable } from '@angular/core';
  import { AuthService } from './auth.service';
  
  @Injectable()
  export class JwtInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService) {}
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      const setAuthorizationToken = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${this.authService.tokenSubject$.value}`)
      });
      console.log('interceptor', this.authService.tokenSubject$.value);
      return next.handle(setAuthorizationToken);
    }
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
  import { LoginComponent } from './login/login.component';
  import { JwtInterceptor } from './jwt-interceptor';
  import { RouterModule, Routes } from '@angular/router';
  import { UsersComponent } from './users/users.component';
  
  const routes: Routes = [
    {path: 'login', component: LoginComponent},
    {path: 'signup', component: SignupComponent},
    {path: 'users', component: UsersComponent}
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      SignupComponent,
      LoginComponent,
      UsersComponent
    ],
    imports: [
      RouterModule.forRoot(routes),
      BrowserModule,
      HttpClientModule,
      ReactiveFormsModule
    ],
    providers: [{provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <hr>
  
  <p><strong>HTTP Request</strong></p>
  
  <pre><code>POST http://localhost:3000/users/login
  Content-Type: application/json
  
  {
    "email": "mr@mr.com",
    "password": "myawesomepassword"
  }
  </code></pre>
  
  <p><strong>HTTP Response</strong></p>
  
  <pre><code>POST http://localhost:3000/users/login
  
  HTTP/1.1 200 OK
  X-Powered-By: Express
  Access-Control-Allow-Origin: *
  Content-Type: application/json; charset=utf-8
  Content-Length: 209
  ETag: W/"d1-MJNo/MXLpxhkX1PE78vlqkKR5GQ"
  Date: Wed, 28 Aug 2019 09:07:42 GMT
  Connection: keep-alive
  
  {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  }
  
  Response code: 200 (OK); Time: 15ms; Content length: 209 bytes
  </code></pre>