title: angular2-jwt token alwas not valid
body: <p>So I have a simple angular 2/laravel app wit jwt authentification support. I have a service that verifies everytime a route is called if the jwt token is valid or not using the angular2-jwt tokenNotExpired() function, but this function always return false for a reason, so the user would be always redirected to login page. </p>
  
  <p>So it goes like that the user logs in, a token will be generated from the backend and saved on local storage, than a service will check if the token is valid before initiating any route using the CanActivate lifecycle hook.</p>
  
  <p>Here is what i did so far: </p>
  
  <p>Login Component: </p>
  
  <pre><code>   ...
              this.http.post(SERVER_URL + 'auth', body, {
                  headers: headers
              }
              ).subscribe(
                  data =&gt; {
  
                      localStorage.setItem('auth_token', data.json().token);
                      this.authHttp.get(SERVER_URL + 'auth/user', headers)
                          .subscribe(
                          data =&gt; {
                              this.store.dispatch({ type: SET_CURRENT_USER_PROFILE, payload: data.json().user });
                              localStorage.setItem('user', data.json().user);
                              this.router.navigate(['/home']);
  
                          },
                          err =&gt; console.log('Fehlermeldung: ' + err)
                          );
  
                  },
  ...
  </code></pre>
  
  <p>app.module :</p>
  
  <pre><code>...
   { provide: AuthConfig, useValue: new AuthConfig({
                headerName: 'Authorization',
                headerPrefix: 'Bearer ',
                tokenName: 'auth_token',
                tokenGetter: (() =&gt; localStorage.getItem('auth_token')),
                globalHeaders: [{ 'Content-Type': 'application/json' }],
                noJwtError: true,
                noTokenScheme: true
    })},
      AuthHttp
  ...
  </code></pre>
  
  <p>auth.service : 
  // Check JWT token service</p>
  
  <pre><code>import { tokenNotExpired } from 'angular2-jwt';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class AuthService  {
  
      loggedIn() {
      return tokenNotExpired();
      }
  
  }
  </code></pre>
  
  <p>auth.guard.service : </p>
  
  <pre><code>// Check if the Token of the user is still valid
  import { Injectable } from '@angular/core';
  import { Router } from '@angular/router';
  import { CanActivate } from '@angular/router';
  import { AuthService } from './auth.service';
  import { AppState } from '../shared/interfaces';
  import { SET_CURRENT_USER_PROFILE } from '../shared/state.actions';
  
  
  
  import { Store } from '@ngrx/store'
  
  @Injectable()
  export class AuthGuardService implements CanActivate {
  
    constructor(private auth: AuthService, private router: Router, private store: Store&lt;AppState&gt;) {}
  
    canActivate() {
      if(this.auth.loggedIn()) {
        return true;
      } else {
          console.log ('Token expired or not valid')
          localStorage.setItem('auth_token', '');
          localStorage.setItem('user', '');
          this.store.dispatch({ type: SET_CURRENT_USER_PROFILE, payload: null });
          this.router.navigate(['/']);
        return false;
      }
    }
  }
  </code></pre>
  
  <p>app.routing : </p>
  
  <pre><code>const routes: Routes = [
    { path: 'home', component: HomeComponent},
    { path: 'about', component: AboutComponent, canActivate: [AuthGuardService]},
    { path: 'profile/:id', component: ProfileComponent, canActivate: [AuthGuardService]},
    { path: '', component: LoginComponent}
  ];
  </code></pre>
  
  <p>EDIT: From the backend side everything is normally ok since the token is generated and stored in the localstorage after the user logs in.</p>