如何在Mapbox GL中处理无效或过期的Access Token？

问题原因分析 #

你遇到的无法捕获令牌无效/过期错误的问题，核心原因有两点：

• 异步跨域请求特性：Mapbox GL JS在验证令牌时发起的是跨域HTTP请求，这类请求的错误不会冒泡到全局上下文，因此try..catch无法捕获。
• map实例事件范围限制：map.on('error')仅监听地图实例初始化完成后发生的内部错误（比如样式解析失败、图层加载异常），而令牌无效会导致地图初始化流程中断，根本无法触发该事件。

错误捕获与令牌验证方案 #

1. 先验证令牌再初始化地图 #

通过Mapbox的公开API端点提前验证令牌有效性，再执行地图初始化，这样可以精准捕获令牌错误：

script.src = 'https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js';
script.onload = async function() {
    const token = 'invalid_token';
    // 调用Mapbox令牌验证端点
    const validateResponse = await fetch(`https://api.mapbox.com/v4/tileset.json?access_token=${token}`);
    
    if (!validateResponse.ok) {
        console.error('令牌无效或已过期');
        // 这里可以添加自定义错误提示逻辑，比如给用户显示弹窗
        return;
    }

    // 令牌有效，初始化地图
    mapboxgl.accessToken = token;
    map = new mapboxgl.Map({
        container: 'mapsection',
        style: 'mapbox://styles/mapbox/streets-v11'
    });

    // 监听地图初始化后的内部错误
    map.on('error', (error) => {
        console.error('地图运行错误:', error);
    });
}

2. 全局错误监听（备选方案） #

如果不需要提前验证，也可以通过全局错误事件捕获令牌相关的网络错误，但这种方式会捕获所有全局错误，需要额外过滤：

window.addEventListener('error', (event) => {
    if (event.message.includes('Mapbox') && event.message.includes('token')) {
        console.error('Mapbox令牌错误:', event.message);
    }
});

关于令牌验证API #

Mapbox提供多个可用于验证令牌有效性的公开端点，常用的有：

• https://api.mapbox.com/v4/tileset.json?access_token=YOUR_TOKEN：验证令牌是否具备基础访问权限
• https://api.mapbox.com/geocoding/v5/mapbox.places/test.json?access_token=YOUR_TOKEN：验证令牌是否具备地理编码服务权限

这些端点会根据令牌状态返回对应的HTTP状态码：

• 200 OK：令牌有效
• 401 Unauthorized：令牌无效或已过期
• 403 Forbidden：令牌权限不足

内容的提问来源于stack exchange，提问作者Peter