navigator.geolocation.getCurrentPosition()权限撤销后重授权仍报错求解决方案

当用户先禁用浏览器位置权限，之后重新启用但调用getCurrentPosition()仍提示“权限已被撤销”，核心原因是浏览器会缓存首次的权限判断状态，即使用户在系统设置中修改了权限，当前页面的navigator.geolocation仍会沿用旧的缓存状态，导致请求失败。

以下是具体解决方案：

1. 增加错误回调并实时校验权限状态 #

原代码未处理错误场景，我们需要添加错误回调函数，在捕获到权限拒绝错误时，用Permissions API查询当前真实的权限状态，根据结果决定是否重新发起位置请求：

if (navigator.geolocation) {
  const successCallback = (position) => {
    console.log(position);
    this.isLocationEnabled = true;
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude;
  };

  const errorCallback = (err) => {
    if (err.code === err.PERMISSION_DENIED) {
      // 实时查询当前地理位置权限状态
      navigator.permissions.query({ name: 'geolocation' }).then(status => {
        if (status.state === 'granted') {
          // 权限已重新授予，再次发起位置请求
          navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
        } else {
          this.isLocationEnabled = false;
          // 提示用户开启权限
          alert('请在浏览器设置中启用位置访问权限');
        }
      });
    }
  };

  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
}

2. 监听权限变化事件 #

如果希望在用户修改权限时自动触发位置获取，不需要手动刷新页面，可以监听权限状态的变化事件：

// 监听地理位置权限变更
if (navigator.permissions) {
  navigator.permissions.query({ name: 'geolocation' }).then(status => {
    status.onchange = () => {
      if (status.state === 'granted') {
        // 权限已开启，立即获取位置
        navigator.geolocation.getCurrentPosition(
          (position) => {
            console.log(position);
            this.isLocationEnabled = true;
            this.latitude = position.coords.latitude;
            this.longitude = position.coords.longitude;
          },
          () => { this.isLocationEnabled = false; }
        );
      } else {
        this.isLocationEnabled = false;
      }
    };
  });
}

关键说明 #

• Permissions API可以绕过浏览器的权限缓存，实时获取当前权限状态，这是解决问题的核心。
• 若用户修改权限后页面仍无响应，可提示用户刷新页面，彻底清除会话级的权限缓存。

内容的提问来源于stack exchange，提问作者Ankit_ 11_IT