Angular2でユーザーが認証されると、複数のオブジェクトのヘッダー（トークン）を設定する

Question

こんにちは私は一般的なhttp要求でオブジェクトを作成できる汎用サービスを作成しました。

私が今直面していますチャレンジは、ユーザーが認証されている場合、そのヘッダにそれぞれ作成されたオブジェクトにトークンを渡すことです（私はのlocalStorageに保存されている応答としてトークンを取得します）

そこで、基本的これらのカスタムHTTPオブジェクトは、任意のレベルで任意の場所（インジェクションごとにコンポーネントごとに）で作成できます。それらのすべてにまだ認証ヘッダーが設定されていません。ユーザーが認証されると、これらすべてのオブジェクトは認証ヘッダーが設定されます。

は、ここで以下plunker

export class App { 

    myHttpObject1; 

    constructor(private myAuth:MyAuth, private myDatabase:MyDatabase) { 
    this.name = 'Angular2 (Release Candidate!)' 
    this.myHttpObject1 = this.myDatabase.httpSchema('users') 
    this.myHttpObject1.log() 
    // this.myHttpObject1.someOtherMethodes()... 
    } 

    login(){ 
    this.myAuth.login() 
    } 
    showHeaders(){ 
    this.myHttpObject1.log() 
    } 
} 

のログインを模擬するためのサービスと一つです。

@Injectable() 

export class MyDatabase{ 

    private base_url:string; 
    private headers :Headers; 

    constructor(){ 
     this.base_url = 'https://jsonplaceholder.typicode.com/'; 
     this.headers = new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
     this.headers.append('Authorization',''); 
    } 

    public httpSchema(path:string){ 
     return new MyHttpObject(path, this.headers || new Headers()) 
    } 

} 

class MyHttpObject{ 
    constructor(public url:string, public headers:Headers){ 
    } 

    log(){ 
     console.log(this.url) 
     console.log(this.headers) 
    } 

    post(){ 
     console.log('here could be a http post') 
    } 

} 


@Injectable() 

export class MyAuth{ 
    login(){ 
    setTimeout(()=>{ 
     console.log('logged In'); 
     localStorage.setItem('token':'mytoken'); 
    },2000) 
    } 
} 

Answer 1

Http Injectorを見ると、コールをインターセプトし、必要なものをhttpオブジェクトに追加します。