angular2-jwt Token always nicht gültig

Question

So habe ich eine einfache eckige 2/Laravel App mit JWT Authentifizierung Unterstützung. Ich habe einen Dienst, der jedes Mal, wenn eine Route aufgerufen wird, verifiziert, wenn das JWT-Token gültig ist oder nicht die Funktion angular2-jwt tokenNotExpired() verwendet, aber diese Funktion gibt aus einem bestimmten Grund immer false zurück, sodass der Benutzer immer zur Anmeldeseite weitergeleitet wird.

Es ist also so, dass sich der Benutzer anmeldet, ein Token wird vom Backend generiert und im lokalen Speicher gespeichert, dann prüft ein Dienst vor dem Initiieren einer Route mithilfe des CanActivate-Lebenszyklus-Hooks, ob das Token gültig ist. Hier

ist, was ich bisher getan:

Anmeldung Komponente:

... 
      this.http.post(SERVER_URL + 'auth', body, { 
       headers: headers 
      } 
      ).subscribe(
       data => { 

        localStorage.setItem('auth_token', data.json().token); 
        this.authHttp.get(SERVER_URL + 'auth/user', headers) 
         .subscribe(
         data => { 
          this.store.dispatch({ type: SET_CURRENT_USER_PROFILE, payload: data.json().user }); 
          localStorage.setItem('user', data.json().user); 
          this.router.navigate(['/home']); 

         }, 
         err => console.log('Fehlermeldung: ' + err) 
         ); 

       }, 
... 

app.module:

... 
{ provide: AuthConfig, useValue: new AuthConfig({ 
       headerName: 'Authorization', 
       headerPrefix: 'Bearer ', 
       tokenName: 'auth_token', 
       tokenGetter: (() => localStorage.getItem('auth_token')), 
       globalHeaders: [{ 'Content-Type': 'application/json' }], 
       noJwtError: true, 
       noTokenScheme: true 
    })}, 
    AuthHttp 
... 

auth.service: // Check JWT Token Service

import { tokenNotExpired } from 'angular2-jwt'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class AuthService { 

    loggedIn() { 
    return tokenNotExpired(); 
    } 

} 

auth.guard.service:

// 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<AppState>) {} 

    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; 
    } 
    } 
} 

app.routing:

const routes: Routes = [ 
    { path: 'home', component: HomeComponent}, 
    { path: 'about', component: AboutComponent, canActivate: [AuthGuardService]}, 
    { path: 'profile/:id', component: ProfileComponent, canActivate: [AuthGuardService]}, 
    { path: '', component: LoginComponent} 
]; 

EDIT: Von der Backend-Seite alles ist in der Regel in Ordnung, da die Token in der localstorage nachdem sich der Benutzer generiert und gespeichert in

Answer 1

LÖSUNG: So habe ich es für jeden behoben, der das gleiche Problem haben könnte, ich habe JWTHelper Funktion isTokenExpired() anstelle von TokenNotExpired verwendet und ich habe die Logik im Dienst invertiert und es funktionierte nicht wirklich sicher warum, obwohl

auth.service sieht aus wie das jetzt:

@Injectable() 
export class AuthService { 

    private jwtHelper: JwtHelper = new JwtHelper(); 
    private token = localStorage.getItem('auth_token'); 

    isExpired() { 
     return this.jwtHelper.isTokenExpired(this.token); 
    } 

} 

und auth.guard.service canActivate():

canActivate() { 
    if (this.auth.isExpired()) { 
     console.log (this.auth.isExpired()); 
     localStorage.setItem('auth_token', ''); 
     localStorage.setItem('user', ''); 
     this.store.dispatch({ type: SET_CURRENT_USER_PROFILE, payload: null }); 
     this.router.navigate(['/']); 
     return false; 
    } else { 
     return true; 
    } 
    } 

Answer 2

Seine wegen der Eigenschaft Name, nimmt es "Token" . Wenn Sie also den Eigenschaftsnamen als ersten Parameter angeben, wird er ordnungsgemäß funktionieren.

Zum Beispiel: https://github.com/auth0/angular2-jwt/issues/334

Answer 3

`localStorage.setI`tem('id-token',token); 

denselben Token Namen lokalen für das Speichern von Token verwendet:

tokenNotExpired('auth_token')

Einige weitere Informationen zu diesem Thema finden Sie hier Speicher/Sitzungsspeicher kann als argume übergeben werden nt to

return tokenNotExpired('id-token'); 

Answer 4

Übergeben Sie das Token als Parameter.

ändern

loggedIn() { 
    return tokenNotExpired(); 
} 

zu

loggedIn() { 
    return tokenNotExpired('id_token'); 
}