时间戳

首页 > 解决方案 > 使用 Leaflet js 时如何使用令牌附加授权标头

angularjs - 使用 Leaflet js 时如何使用令牌附加授权标头

问题描述

我在我的 Angular.js 地图应用程序中使用 Leaflet。我的资源之一需要带有令牌的授权标头。我正在使用传单实时插件（在此处找到：https ://github.com/perliedman/leaflet-realtime ）来获取地图更新，因此需要能够在实时执行获取数据时指定我的标题。

我首先尝试使用另一个库 fetch-intercept（在此处找到：https ://github.com/werk85/fetch-intercept ）来拦截请求并附加标头，但拦截器被忽略了。我在拦截器中包含了一个 console.log ，但从未到达。

经过更多研究，我注意到应该支持指定标题：https ://github.com/perliedman/leaflet-realtime/pull/83 。但是，我找不到如何正确附加授权令牌的示例。这是我目前正在尝试的：

this.mapRealtime = L.realtime({
  url: this.getRealtimeUrl(),
  crossOrigin: true,
  headers: {"Authorization": "token"},
  type: 'json',
},

但是，当我从 Web 浏览器 (Chrome) 调试控制台检查网络日志时，我看到的请求标头是：

显示临时标题

访问控制请求标头：授权

访问控制请求方法：GET

服务器返回错误类型为 MissingAuthenticationTokenException 的状态 403。

谁能提供如何正确附加令牌的示例？谢谢！

标签： angularjsleafletauthorizationfetchinterceptor

解决方案

实时 Leaflet 仅采用 url 或 json 文件路径，您将无法传递 headers(auth)，因为它们有无法正常工作的补丁。我面临同样的问题。我所做的如下：

 realtime = (L as any).realtime(async function (success, error) {
    let geodataJson = await self.updateGeoJson();
    success(geodataJson);
  }, {
    interval: 15 * 1000,
    onEachFeature: onEachFeature,......

我已经将函数传递给实时，在那个函数中我用标题调用了简单的 API

async  updateGeoJson() {
await this.api.getMarkersGeoJson().subscribe((res: any) => {
  this.geoData = res;
});
return this.geoData; }

在第一次调用时，它不会从此函数中获取数据，因此我们还需要在initmap之前的ngOnInit中加载this.geoData中的数据。对我来说，它正在工作我知道这只是解决方法，但这个问题仍然是传单实时的。希望这对你有用

推荐阅读