如何为每个切片请求添加其他标头和令牌

Question

我们正在使用带有自定义图块提供程序的mapbox gl js，并且图块受令牌保护。在我们的情况下，每个图块将具有自己的令牌，并根据需要通过AJAX请求获取。为了实现这一目标，我尝试使用如下所示的 tranformRequest 选项，但它们都不起作用

方法1返回承诺

var map = new mapboxgl.Map({
    container: 'map',
    style: 'https://www.example.com/styles/streets/style.json',
    center: [53.33, 24.5],
    zoom: 8,
    transformRequest: function(url, resourceType) {
        if(resourceType !== 'Tile') {
            return {
                url: url,
            };
        }

        return axios.get('../api/get-token.php', {
            params: {
                AccessURL: url
            },
            headers: {
                'X-Requested-With': 'XmlHttpRequest'
            }
        }).then(function (response) {
            return {
                url: url,
                headers: {
                    'X-Requested-With': 'XmlHttpRequest'
                    'token': response.data.token
                }
            }
        });
    }
});

方法2异步/等待

var map = new mapboxgl.Map({
    container: 'map',
    style: 'https://www.example.com/styles/streets/style.json',
    center: [53.33, 24.5],
    zoom: 8,
    transformRequest: async function(url, resourceType) {
        if(resourceType !== 'Tile') {
            return {
                url: url,
            };
        }

        try {
            const response = await axios.get('../api/get-token.php', {
                params: {
                    AccessURL: url
                },
                headers: {
                    'X-Requested-With': 'XmlHttpRequest'
                }
            });
            return {
                url: url,
                headers: {
                    'X-Requested-With': 'XmlHttpRequest'
                    'token': response.data.token
                }
            };
        } catch (error) {
            return {
                url: url,
            };
        }
    }
});

我如何实现这种情况？ mapbox gl js库中是否存在任何选项或任何解决方法？

Answer 1

我不相信transformRequest可以接受aprom等异步参数。它希望调用一个函数并立即收到一个包含url和标头的对象：

{
...
transformRequest: function transformRequest(url, resourceType) {
        if (resourceType === 'Tile' && url.match('...')) {
            return {
                url: url,
                headers: { 'Authorization': 'Basic ' + btoa('MyPassword') }
            };
        }
    }

如果您的用例确实为每个图块都需要一个唯一的身份验证令牌（这看起来很不正常！），那么我不知道一种可行的方法。