[英]Aurelia - Setting headers in Aurelia Fetch Client
I'm using aurelia-http-client
and struggling to both use interceptors and set headers for my requests. 我正在使用
aurelia-http-client
并且努力使用拦截器并为我的请求设置标头。
What I need to achieve is; 我需要实现的是;
aurelia-event-aggregator
when it's triggered. aurelia-event-aggregator
发出一个事件。 The only way I've got interceptors to correctly publish events is to use aurelia.container
in main.js like below; 我有拦截正常出版活动的唯一方法就是使用
aurelia.container
在像下面main.js;
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());
}
Because the header for my request must be set after the App has initialised - I can't do it in the configuration above like most tutorials online do. 因为必须在应用初始化后设置我的请求的标头-我无法像大多数在线教程一样在上述配置中完成标头。
Instead, it needs to be set as below; 相反,它需要设置如下;
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);
});
}
}
I've tried variations of; 我尝试过
this.http.configure((configure) => {
if(this.username && this.password) {
configure.withDefaults({
headers: {
'Authorization': 'Basic ' + btoa(this.username + ":" + this.password)
}
});
}
})
But I can't get anything to alter the header where I need to, and maintain the configuration I've set up in main.js 但是我什么都无法更改需要的标头,并保持我在main.js中设置的配置
Try creating an actual headers object like this: 尝试创建一个实际的标头对象,如下所示:
this.http.configure((configure) => {
if(this.username && this.password) {
configure.withDefaults({
headers: new Headers({
'Authorization': 'Basic ' + btoa(this.username + ":" + this.password)
})
});
}
})
Fabio Luiz in the comments set me on to a working solution. Fabio Luiz在评论中为我提供了一个可行的解决方案。 It's not ideal I don't think, but it works.
我不认为这不是理想的方法,但是可以。
I've essentially created an AppState class that I use to pass the username/password to the interceptor; 实际上,我已经创建了一个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;
}
}
}
It's pretty rough and ready, but it's only for a test Application so I'm happy with it. 它虽然很粗糙并且已经准备就绪,但是仅用于测试应用程序,因此我对此感到满意。
Here's its use; 这是它的用途;
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
}
}
Then my main.js file; 然后是我的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());
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.