title: AuthService in Angular2
body: <p>I'm currently building an app in angular2. I therefore implemented an AuthService that handles signin, signup etc. 
  If a user signed in the id_token (angular2-jwt) is stored in localStorage. The roles and permission of the user are stored in <code>AuthService.userRoles</code> and <code>AuthService.userPerms</code>.</p>
  
  <p>A boolean property <code>AuthService.isAuthenticated</code> uses the function <code>tokenNotExpired()</code> from angular2-jwt which returns false if a user is signed out or the token stored in localStorage is expired. If a user signed in the <code>AuthService.isAuthenticated</code> is updated to <code>true</code>;</p>
  
  <p>I got routes that use an AuthGuard that only allows <strong>authenticated</strong> users to activate this route by checking the <code>AuthService.isAuthenticated</code> property. </p>
  
  <p>If a certain route looks like this:</p>
  
  <pre><code>{
    path: "somewhere",
    component: SomeComponent,
    canActivate: [AuthGuard],
    data: {
      permissions: [
        "add:some",
        "edit:some"
      ]
    }
  }
  </code></pre>
  
  <p>the same AuthGuard checks if the current signed in user has the required permissions by matching <code>AuthService.userPerms</code> with the route's  <code>data.permissions</code>. <strong>Which works as well.</strong></p>
  
  <p>My app uses a "main component". This main component is "public" and does <strong>not</strong> use the AuthGuard. It is bootstrapped inside the main <code>app.module</code> and has <strong>no own route</strong>. Inside the template of this main parent Component I got the app wide navigation. </p>
  
  <p>Inside this navigation are buttons to routes which are protected by the AuthGuard and are therefore accessible only if a user is signed in and <strong>has certain permissions or roles</strong> if required by the route. For example</p>
  
  <pre><code>&lt;button [routerLink]="/somewhere"&gt;Somewhere&lt;/button&gt;
  </code></pre>
  
  <p>If the user clicks this button and is <strong>not</strong> authorized he is redirected to an <code>unauthorized</code> route. <strong>Works so far</strong></p>
  
  <p><strong>I want to prevent that</strong> by making these buttons only visible if the user is able to activate the routes. </p>
  
  <pre><code>&lt;button [routerLink]="/somewhere"
    *ngIf="isAuthorized["buttonSomewhere"]"&gt;
    Somewhere
  &lt;/button&gt;
  </code></pre>
  
  <p>Therefore inside the main AppComponent (which handles the navigation) I want to <strong>check</strong> the userPermissions for each button inside the template and store the result in an object like this:</p>
  
  <pre><code>/* AppComponent */
  public isAuthorized = {
     buttonSomewhere = true;
  }
  </code></pre>
  
  <p>This <strong>check</strong> is handled by <code>AuthService.isAuthorized(theRouteToBeActivated)</code> which is called inside the AppComponent constructor and matches the routes <code>data.permission</code> with the users permissions stored in <code>AuthService.userPerms</code>.</p>
  
  <p>The problem is, since the AppComponent is <strong>public</strong> and not protected by AuthGuard, that the constructor runs when the user is not signed in, which is right. At this point the called <code>AuthService.isAuthorized(theRouteToBeActivated)</code> returns false and stores the value in </p>
  
  <pre><code>/* AppComponent */
  public isAuthorized = {
    buttonSomewhere = false;
  }
  </code></pre>
  
  <p>which is right as well. So if a user is signed out he does not see the buttons to routes he could not activate.</p>
  
  <p><strong>BUT the problem is:</strong> after the user signed in the <code>AuthService.isAuthorized(theRouteToBeActivated)</code> called in the AppComponents constructor is <strong>NOT</strong> called again, and </p>
  
  <pre><code>/* AppComponent */
  public isAuthorized = {
    buttonSomewhere = false;
  }
  </code></pre>
  
  <p>remains as it is. But after the user signed in the function needs to be called again so that it returns true and changes</p>
  
  <pre><code>/* AppComponent */
  public isAuthorized = {
    buttonSomewhere = true;
  }
  </code></pre>
  
  <p>so that the buttons in the template are <strong>now visible to the signed in user</strong>. At the moment I need to reload the app inside the browser. Then the buttons are visible to the signed in user. But I don't want a reload.</p>
  
  <p>How could I solve this?</p>