title: Angular 2+ HttpIntercept: wait for token from server before returning intercept function
body: <p>I know that this question has been addressed in one way/shape/form before, but I've reviewed all the questions and answers I can find, and still I cannot figure out how to solve this problem.</p>
  
  <p>HttpIntercept.intercept has to return next.handle(request).  However, I need it to wait (I know "wait" is a dirty word in front end) for the bearer token to come back from the server before it can return.  I can't for the life of me find a pattern that accomplishes this.  The intercept function cannot return until we have made a trip to the server to get a bearer token.</p>
  
  <p>If this has been answered, I apologize, please provide me the link to the appropriate answer.</p>
  
  <p>Non-working example (function returns before token is appended):</p>
  
  <pre><code>export class TokenInterceptor implements HttpInterceptor {
    constructor(private auth: AuthenticationService) {}
  
    intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      let token: string;
      this.auth.getToken().subscribe(response =&gt; {
        token = response['access_token'];
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });
      });
  
      return next.handle(request);
    }
  }
  </code></pre>