Angular 2 - JWT驗證

我使用RC1與新路由器（不是棄用的）。Angular 2 - JWT驗證

我已經閱讀了大部分博客和文檔，但我確實無法找到一種慣用的方式來做到這一點，特別是沒有使用「新」路由器。到目前爲止，我有我的應用程序工作的「完美」，只是缺少幾件事情：

我應該如何去添加令牌上每單個HTTP請求中Authorization頭？（就像Angular 1.x中的攔截器一樣）
如何攔截任何40x響應，如果需要（意味着路由受保護）導航到另一個url？
如何設置路線（或組件），以便在用戶未登錄時應用程序將導航到登錄網址？
加分：在主要組件的contstructor中加載基本用戶數據是否正確？

我不需要一個完整的演示或類似的東西，只是我應該去的幾個要點。

2016-05-25 Andrew

我不得不不久前處理同樣的問題，並用以下解決方案上來。我不知道這是否是最佳做法，並且非常喜歡Angular 1的攔截器作爲此解決方案，但這適用於我：

我爲內置的Http服務創建了包裝服務。當我想使用Http時，我改爲注入此服務。

@Injectable() 
export class HttpWrapper { 
    constructor(private loginService:LoginService, private http:Http, private router:Router) { 
    } 

    get(url: string, options?: RequestOptionsArgs): Promise<Response> { 
     let promise: Promise<Response> = this.http.get(url, this.addHeaders(options)).toPromise(); 
     return new Promise((resolve, reject) => { 
      promise.then(success => { 
       resolve(success); 
      }, error => { 
       this.onError(error); 
       reject(error); 
      }); 
     }); 
    } 

    //... repeat the same concept for post, put, delete... 

    private addHeaders(otherOptions?: RequestOptionsArgs): RequestOptions { 
     let headers = new Headers({'Content-Type': 'application/json', token: this.loginService.token}); 
     let options = new RequestOptions({ headers: headers }); 
     if (otherOptions) { 
      options.merge(otherOptions); 
     } 
     return options; 
    } 

    private onError(reason) { 
     if(reason.status === 401) { 
      this.router.navigateByUrl(`/login?${encodeURIComponent(this.router.lastNavigationAttempt)}`); 
     } 
    } 
}

*請注意，我使用的是不推薦使用的路由器。我正在等待Angular團隊正確記錄新的文件。

我覺得這幾乎可以解答你的問題1-3。至於獎金問題，更多的是用例問題。如果你知道你會在任何情況下使用用戶的數據，那麼預先加載用戶的數據是有道理的。否則，爲了不在開始時使應用程序權限過載，只能在需要時加載這些數據。

來源

2016-06-09 14:50:16 yarons

你可以看看Angular 2 Auth，它實現了基本的令牌認證，並處理路由到登錄頁面，以防未經授權。這是爲不推薦使用的路由器（我猜），但你明白了。

https://github.com/teonite/angular2-auth

來源

2016-06-09 14:26:54

Angular 2 - JWT驗證

回答

相關問題