angular2 login and subsequent routing
<p>I have an angular2 application and I am adding login to it. So Login page will be the first thing that appears and if login is successful then rest of the app is accessible.</p>

<p>However I am not sure how I handle the routing. So far addition to all other components, I have created Authentication component with component.ts, service and html.</p>

<p>My top level app.component.ts:</p>

<pre><code>@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
    styleUrls:['./app/app.component.css'],
    directives:[ROUTER_DIRECTIVES, Navbar, Stepper, Cart],
    providers:[CartService, ProgressService, LoginService]
})

export class AppComponent {} 
</code></pre>

<p>routes:</p>

<pre><code>export const routes: RouterConfig = [

  { path: '', component: Home },
  { path: 'login', component: LoginComponent }, &lt;- I was just trying this
  { path: 'about', component: About },
  { path: 'hall', component: HallComponent },
  { path: 'caterer', component: CatererComponent }

];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];
</code></pre>

<p>top most app html:</p>

<pre><code>&lt;navbar&gt;&lt;/navbar&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>

<p><strong>So on successful login I would navigate to 'Home'</strong></p>

<p>Login service:</p>

<pre><code>@Injectable()
export class LoginService extends BaseService {

  public errorMessage: string;

  constructor (http: Http) {super(http);}

   private _authenticationUrl = this._baseUrl + 'rest-auth/';  // URL to web api


  login(username: string, password: string) {

    let body = JSON.stringify({
      'username' : username, 
      'password': password
    });

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    this.http.post(this._authenticationUrl + 'login/', body, options)
                    .map(this.extractData)
                    .catch(this.handleError).subscribe( data =&gt; this.setToken(data.key),
                                                        error =&gt;  this.errorMessage = &lt;any&gt;error);
  }

  setToken(key: string) {
    console.log(key);
    localStorage.setItem('auth_token', key);
    /*do routing here*/
    // this.nav.setRoot(StartPage);

  }
}
</code></pre>

<p>Home.component.html:</p>

<pre><code>&lt;div class="mdl-grid"&gt;
    &lt;div class="mdl-cell mdl-cell--12-col"&gt;

        &lt;p&gt;Home component&lt;/p&gt;
        ...
&lt;div&gt;
&lt;hall *ngIf = "makeHallsvisible" [city]="specific_city" [date]="date" (setProduct)="setProduct($event)"&gt;&lt;/hall&gt;
&lt;caterer *ngIf = "makeCaterersvisible" [city]="specific_city" (setProduct)="setProduct($event)"&gt;&lt;/caterer&gt;
</code></pre>