angular2-jwt token alwas無效

Question

所以我有一個簡單的角度2/laravel應用程序和jwt驗證支持。如果jwt令牌有效或者沒有使用angular2-jwt tokenNotExpired（）函數，我有一個服務可以驗證每次調用路由，但由於某種原因該函數總是返回false，所以用戶總是被重定向到登錄頁面。

因此，用戶登錄後，將從後端生成一個令牌並保存在本地存儲中，而不是服務在使用CanActivate生命週期掛鉤啓動任何路由之前檢查令牌是否有效。

這裏是我做了什麼至今：

登錄組件：

... 
      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： //檢查JWT令牌服務

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

編輯：從由於產生並在用戶登錄後存儲在localStorage的令牌中的後端側的一切通常是確定。

Answer 1

解決方案：這就是我如何固定它爲每個人誰可能有同樣的問題，我用JWTHelper功能isTokenExpired（），而不是tokenNotExpired，我倒在業務邏輯和它的工作真的不知道爲什麼，雖然

auth.service現在看起來像這樣：

@Injectable() 
export class AuthService { 

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

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

} 

和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

其因屬性名的，它假定它是 「令牌」 。因此，當您提供屬性名稱作爲第一個參數時，它將正常工作。

例如：

tokenNotExpired('auth_token')

對此事的一些更多的信息可以在這裏找到：用於保存令牌當地 https://github.com/auth0/angular2-jwt/issues/334

Answer 3

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

同樣的名字存儲/會話存儲 可以通過作爲一個argume nt到

return tokenNotExpired('id-token'); 

Answer 4

將令牌作爲參數傳遞。

變化

loggedIn() { 
    return tokenNotExpired(); 
} 

到

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