VEGA 数据的自定义 HTTPClient url

Question

我在 angular 项目中使用 VEGA（可视化语法）。最近我添加了 Keycloak 库以便对用户进行身份验证。

Keycloak 库有一个 HTTP 拦截器，它为每个 HTTP 调用添加 Authorization: Bearer TOKEN header。问题是，对于来自 vega 的 HTTP 调用，它没有。

{
$schema: "https://vega.github.io/schema/vega/v5.json",
description: "AVGCallDuration Per Total",
width: 720,
height: 520,
autosize: "fit",
signals: [{ name: "timeunit", value: ["day"] }],
data: [
    {
        name: "mainDS",
        url: "https://my-backend-server:8080/api/populations/chart"
}]
}

根据以上说明，vega 会向 https://my-backend-server:8080/api/populations/chart 提出请求。我怎样才能让 angular 添加 Authorization: Bearer TOKEN header 到这个请求？

Answer 1

您可以创建自定义加载程序并在创建 Vega 视图时设置它。有关文档，请参阅 https://vega.github.io/vega/docs/api/view/#view_loader。

Answer 2

正如@dominik 指定的那样，答案是使用自定义加载程序。这是我花了几个小时研究后得出的结论。

像这样覆盖加载程序的默认 http 属性：

this.vegaView.loader().http = this.vegaHTTPLoader.bind(this);

像这样写你的函数：

vegaHTTPLoader(url, options): Promise<string> {
    const _self = this;
    const httpCallOptions = Object.assign({}, { headers: {'header1':'value1','header2':'value2'}, responseType: 'text' }, options);
    return new Promise<string>((resolve, reject) => {
        _self.httpClient.get<string>(url, httpCallOptions).subscribe(
            (response) => {
                resolve("" + response);
            },
            (error) => {
                reject("Error while loading the URL provided as datasource for this vega chart. " + error);
            }
        );
    });
}

VEGA 数据的自定义 HTTPClient url

Custom HTTPClient for VEGA data url

angular

keycloak

vega