A questions about angular2 route <p>Here is the official example of angular-router. <a href="https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles</a> <a href="https://angular.io/resources/live-examples/router/ts/plnkr.html" rel="nofollow noreferrer">https://angular.io/resources/live-examples/router/ts/plnkr.html</a></p> <p><a href="https://i.stack.imgur.com/gvNJk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gvNJk.png" alt="enter image description here"></a></p> <p><a href="https://i.stack.imgur.com/WXE3q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WXE3q.png" alt="enter image description here"></a></p> <p>If I have requirements like this:When user did not log in,He can not see the top bar(menu list in the second row of the picture should be hidden),only after he logged in,the top bar is visible,I thought a lot about this but can not find the solution.I dont know how to use canActive hook to control it,anyone has an idea please tell me,thank u.</p> <pre><code>import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` &lt;h1 class="title"&gt;Angular Router&lt;/h1&gt; &lt;nav&gt; &lt;a routerLink="/crisis-center" routerLinkActive="active"&gt;Crisis Center&lt;/a&gt; &lt;a routerLink="/heroes" routerLinkActive="active"&gt;Heroes&lt;/a&gt; &lt;a routerLink="/admin" routerLinkActive="active"&gt;Admin&lt;/a&gt; &lt;a routerLink="/login" routerLinkActive="active"&gt;Login&lt;/a&gt; &lt;/nav&gt; &lt;router-outlet&gt;&lt;/router-outlet&gt; ` }) export class AppComponent { } </code></pre> <p>Let me be more clear about my question.When user loading page of structure like this.Where should I get and record the login status to achieve my goal,from route or somewhere else?</p>