How to add additional headers and token for each tile request - mapbox-gl-js

Question

We are using mapbox gl js with custom tile providers and tiles are protected by token. In our case each tile will have its own token and fetched via AJAX request on demand. In order to achieve this i tried to use tranformRequest option like below but none of them works
Method 1 Returning promise
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
}
}
});
}
});
Method 2 async/await
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,
};
}
}
});
How can i achieve this cases? is there any options exists in mapbox gl js library or any workaround ?

Answer 1

I don't believe transformRequest can accept an async parameter such as a promise. It expects to call a function and immediately receive an object containing url and headers:
{
...
transformRequest: function transformRequest(url, resourceType) {
if (resourceType === 'Tile' && url.match('...')) {
return {
url: url,
headers: { 'Authorization': 'Basic ' + btoa('MyPassword') }
};
}
}
If your use case truly requires a unique authentication token for every single tile (which seems...unusual!) then I'm not aware of a method which will work.