Aurelia - Aureliaフェッチクライアントでヘッダーを設定する

Question

私はaurelia-http-clientを使用しています。私の要求に対してインターセプターとヘッダーの両方を使用するのに苦労しています。

達成する必要があるのは、

• 各インターセプタ（要求、要求エラー、応答、および応答エラー）は、起動時にaurelia-event-aggregatorを使用してイベントを送信します。
• ヘッダが情報を含む各要求に追加されますが、私は正しく、イベントを公開するためにインターセプタを持っている唯一の方法はmain.js以下のようなでaurelia.containerを使用することですページに

に入りました。

import {HttpClient} from 'aurelia-http-client'; 
import {EventAggregator} from 'aurelia-event-aggregator'; 

export function configure(aurelia) { 
    const container = aurelia.container; 

    const httpClient = container.get(HttpClient); 
    const ea = container.get(EventAggregator); 

    httpClient.configure(config => { 
    config.withInterceptor({ 
     request(request) { 
     ea.publish('http-request', request); 
     return request; 
     }, 
     requestError(error) { 
     ea.publish('http-request-error', error); 
     throw error; 
     }, 
     response(response) { 
     ea.publish('http-response', response); 
     return response; 
     }, 
     responseError(error) { 
     ea.publish('http-response-error', error); 
     throw error; 
     } 
    }); 
    }); 

    aurelia.use 
    .standardConfiguration() 
    .developmentLogging() 
    .singleton(HttpClient, httpClient); 


    aurelia.start().then(() => aurelia.setRoot()); 
} 

アプリケーションが初期化した後に私の要求のヘッダーを設定する必要がありますので - 私がやるオンラインほとんどのチュートリアルのような上記の構成でそれを行うことはできません。

代わりに、次のように設定する必要があります。

import {inject} from "aurelia-framework"; 
import {HttpClient} from "aurelia-http-client"; 
import {EventAggregator} from "aurelia-event-aggregator"; 

@inject(HttpClient, EventAggregator) 
export class Dashboard { 

    requestMethod = "GET"; 

    constructor(HttpClient, EventAggregator) { 
    this.http = HttpClient; 
    this.ea = EventAggregator; 
    } 

    triggerGet() { 
    // HEADER NEEDS TO BE SET HERE USING THIS.FOO 
    this.http.get(this.url).then(response => { 
     console.log("GET Response", response); 
    }); 
    } 
} 

私はさまざまな方法を試みました。

this.http.configure((configure) => { 
    if(this.username && this.password) { 
    configure.withDefaults({ 
     headers: { 
     'Authorization': 'Basic ' + btoa(this.username + ":" + this.password) 
     } 
    }); 
    } 
}) 

しかし、私は私がする必要があるヘッダーを変更するための何かを得る、と私はコメントでmain.js

Answer 1

ファビオ・ルイスに設定した構成を維持することはできませんが私をオンに設定しました実用的なソリューションに私は思っていない理想的ではありませんが、それは動作します。

私は基本的にユーザー名/パスワードをインターセプタに渡すために使用するAppStateクラスを作成しました。

export class AppState { 

    properties = {}; 

    clear() { 
    this.properties = {}; 
    } 

    set(key, value) { 
    this.properties[key] = value; 
    } 

    get(key) { 
    if(this.properties[key]) { 
     return this.properties[key]; 
    } else { 
     return false; 
    } 
    } 
} 

かなり荒くて準備ができていますが、テストアプリケーションのためだけですので、私はそれに満足しています。

使用方法は次のとおりです。

import {inject} from "aurelia-framework"; 
import {HttpClient} from "aurelia-http-client"; 
import {EventAggregator} from "aurelia-event-aggregator"; 
import {AppState} from "services/appState"; 

@inject(HttpClient, EventAggregator, AppState) 
export class Dashboard { 

    constructor(HttpClient, EventAggregator, AppState) { 
     this.http = HttpClient; 
     this.ea = EventAggregator; 
     this.appState = AppState; 

     // Create listeners 
    } 

    run() { 
     if(this.username && this.password) { 
      this.appState.set('authenticate', true); 
      this.appState.set('username', this.username); 
      this.appState.set('password', this.password); 
     } 

     // Trigger HTTP Requests 
    } 
} 

その後、私のmain.jsファイル。

import {HttpClient} from 'aurelia-http-client'; 
import {EventAggregator} from 'aurelia-event-aggregator'; 
import {AppState} from 'services/appState'; 

export function configure(aurelia) { 
    const container = aurelia.container; 
    const httpClient = container.get(HttpClient); 
    const ea = container.get(EventAggregator); 
    const appState = container.get(AppState); 

    httpClient.configure(config => { 
     config.withInterceptor({ 
      request(request) { 
       if(appState.get('authenticate')) { 
        let username = appState.get('username'); 
        let password = appState.get('password'); 
        request.headers.add("Authorization", "Basic " + btoa(username + ":" + password)); 
       } 
       ea.publish('http-request', request); 
       return request; 
      }, 
      requestError(error) { 
       ea.publish('http-request-error', error); 
       throw error; 
      }, 
      response(response) { 
       ea.publish('http-response', response); 
       return response; 
      }, 
      responseError(error) { 
       ea.publish('http-response-error', error); 
       throw error; 
      } 
     }); 
    }); 

    aurelia.use 
     .standardConfiguration() 
     .developmentLogging() 
     .singleton(HttpClient, httpClient); 


     aurelia.start().then(() => aurelia.setRoot()); 
} 

Answer 2

実際のヘッダを作成してみてくださいは、このようなオブジェクト：

this.http.configure((configure) => { 
    if(this.username && this.password) { 
    configure.withDefaults({ 
     headers: new Headers({ 
      'Authorization': 'Basic ' + btoa(this.username + ":" + this.password) 
     }) 
    }); 
    } 
})