ユーザー認証情報をAngularアプリケーションに格納する場所はどこですか？

Question

角度クライアントアプリケーションはそれがhttp://localhost:8080 上で実行されている春基づいて、RESTfulなAPIと通信http://localhost:4200

上で実行されているバックエンドの認証メカニズムはhttp basicで、すべての要求の春のために内部的に資格証明書の正当性をチェックするためのフィルタを呼び出しますユーザーがログインするとAngularクライアントから渡されます。

ユーザーがログインすると、資格情報はBase64.encodeBase64 でエンコードされ、Authorizationヘッダーに設定されます。

btoa関数は、Authorizationヘッダーを設定するために使用されます。これはうまく動作し、TLS/ HTTPSは、ネットワークを安全に通過するために資格情報を暗号化するために使用されます。

その後のリクエストでは、毎回同じ資格情報を渡す必要があります。だから、彼は後続の要求のために正常にログインした後、ユーザー資格情報をどこに保管するべきですか？例えば

、この要求：保存について

addEmployee(employee : Employee) : Observable<Response> { 
     return this.http.post('http://localhost:8080/employee/', JSON.stringify(employee), 
      {headers: this.getHeaders()}).map(res => res.json()); 
    } 

Answer 1

あなたは3つの方法があります。

localStorage

localStorage

keyとストリングvalueを記憶しています。ブラウザを閉じても消去されません。

// setting new item 
localStorage.setItem('MyApp_Auth', JSON.stringify(obj)); 

// getting item 
let auth; 
if (localStorage.getItem('MyApp_Auth') 
    auth = localStorage.getItem('MyApp_Auth'); 

// removing 
localStorage.removeItem('MyApp_Auth'); 

// clear all data 
localStorage.clear(); 

sessionStorage

sessionStoragelocalStorageに似ているが、そのデータは、唯一の限り、セッションが閉じないように保持されます。使用方法はlocalStorageとまったく同じです。それだけだから、それは;で区切らのみ1つの文字列だから維持するのは難しい

document.cookies = "username=John Doe; expires=Thu, 01 Jan 1970 00:00:00 UTC"; 

だから

クッキー

クッキーは、最良のオプションは、サードパーティのライブラリであるので、それを使用するために、もう少し問題があります。 js-cookies以上のフレンドリーな角度のようなものangular2-cookie;

HttpInterceptor

角度のバージョン4以来、あなたはここであなたがautomaticalyあなたのあらゆるrequestにheadersを追加することができますHttpInterceptorを実装することができます。詳細は、Authenticaion using the HttpClient and HttpInterceptorsを参照してください。