React+TypeScript实现实时监听地理定位权限允许/拒绝状态的问题

问题描述 #

使用React+TypeScript开发网页时，需要监听用户对地理定位权限弹窗的操作（Allow/Deny），但当前功能存在异常：点击Allow按钮后，必须刷新页面才能获取到定位数据，无法实时触发定位请求并返回结果。

原组件代码如下：

import { useEffect, useState } from "react";
import useGeolocation from "./useGeolocation";

export default function App() {
  const [locationAccess, setLocationAccess] = useState<boolean>(false);

  useEffect(() => {
    navigator.permissions
      .query({ name: "geolocation" })
      .then((permissionStatus) => {
        setLocationAccess(permissionStatus.state === "granted");
      });
  }, [locationAccess]);

  const geoLocation = useGeolocation({ locationAccess });

  console.log("geoLocation", geoLocation);

  return <>></>;
}

问题根源 #

1. 未监听权限状态变更事件：navigator.permissions.query仅查询当前权限状态，不会自动监听后续的权限变化，导致用户点击Allow/Deny后组件无法感知状态更新。
2. useEffect依赖错误：将locationAccess作为依赖会引发无限循环，且无法触发权限变更后的定位请求。
3. useGeolocation钩子未响应权限变化：钩子内部未将locationAccess作为依赖，权限变更时不会重新发起定位请求。

解决方案 #

1. 修改App组件，监听权限状态变更 #

移除错误的依赖，添加权限变更事件监听，实时更新权限状态：

import { useEffect, useState } from "react";
import useGeolocation from "./useGeolocation";

export default function App() {
  const [locationAccess, setLocationAccess] = useState<boolean>(false);

  useEffect(() => {
    navigator.permissions
      .query({ name: "geolocation" })
      .then((status) => {
        // 初始化设置当前权限状态
        setLocationAccess(status.state === "granted");

        // 监听权限状态变更事件
        const handlePermissionChange = () => {
          setLocationAccess(status.state === "granted");
        };
        status.addEventListener("change", handlePermissionChange);

        // 组件卸载时清理事件监听
        return () => {
          status.removeEventListener("change", handlePermissionChange);
        };
      });
  }, []); // 空依赖，仅执行一次初始化

  const geoLocation = useGeolocation({ locationAccess });

  console.log("geoLocation", geoLocation);

  return <>></>;
}

2. 调整useGeolocation钩子，响应权限变化 #

确保钩子在locationAccess变为true时自动发起定位请求：

import { useEffect, useState } from "react";

interface UseGeolocationProps {
  locationAccess: boolean;
}

interface GeolocationResult {
  loaded: boolean;
  coordinates: { lat: string | number; lng: string | number };
  locale: string;
  countryCode: string;
  error: GeolocationPositionError | {};
}

export default function useGeolocation({ locationAccess }: UseGeolocationProps): GeolocationResult {
  const [state, setState] = useState<GeolocationResult>({
    loaded: false,
    coordinates: { lat: "", lng: "" },
    locale: "",
    countryCode: "",
    error: {}
  });

  useEffect(() => {
    // 权限未允许时不发起请求
    if (!locationAccess) return;

    const onSuccess = (position: GeolocationPosition) => {
      setState({
        loaded: true,
        coordinates: {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        },
        locale: navigator.language,
        countryCode: navigator.language.split("-")[1] || "",
        error: {}
      });
    };

    const onError = (error: GeolocationPositionError) => {
      setState({
        ...state,
        loaded: true,
        error
      });
    };

    // 检查浏览器支持情况
    if (!navigator.geolocation) {
      setState({
        ...state,
        loaded: true,
        error: { message: "浏览器不支持地理定位" } as GeolocationPositionError
      });
      return;
    }

    // 发起定位请求
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }, [locationAccess]); // 依赖权限状态，变更时重新执行

  return state;
}

效果验证 #

修改完成后，用户点击权限弹窗的Allow按钮时：

1. 权限状态会通过change事件实时更新locationAccess
2. useGeolocation钩子触发重新执行，自动发起定位请求
3. 控制台会实时打印包含定位信息的结果对象，无需刷新页面

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