title: Angular 2 auth guard - my app needs to first authenticate before loading any of the routes. How do I handle this?
body: <p>Basically, here's how my <code>AppComponent</code>'s <code>app.component.html</code> (my bootstrap component) looks:</p>
  
  <pre><code>&lt;navigation-top&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>In my <code>AppComponent</code>'s <code>ngOnInit</code> I'm calling my authentication service which returns me a token.  I need this token to send with each API request I make.</p>
  
  <pre><code>if (!tokenNotExpired()) {
    this.authService.login()
    .subscribe(
      data =&gt; {
        const key = data.headers.get('Authorization');
        this.key = key;
        localStorage.setItem('id_token', key);
      }
    );
  } else {
    this.key = localStorage.getItem('id_token');
  }
  </code></pre>
  
  <p>However, I am also adding a Auth Guard to my <code>app.routes.ts</code> so that <code>router-outlet</code> only loads components once I have a token.</p>
  
  <p>However, I'm not sure the best way to approach this problem.  If I put my call to get a token in <code>AppComponent</code>, then at the start my Auth Guard will return false if I don't have a key at all, and thus nothing will load.</p>
  
  <p>How can I set up my logic so that I wait for the key?</p>