如何在React JS中获取当前连接WiFi的SSID（无后端API）

核心限制说明 #

WiFi SSID属于设备敏感隐私数据，浏览器出于安全考虑，仅允许在HTTPS/localhost环境下，且用户主动触发授权操作的前提下，通过特定实验性API获取，目前仅Chrome系浏览器（Chrome 86+、Edge、Brave等）提供支持，Firefox、Safari暂不兼容。

具体实现步骤（React组件示例） #

以下是基于Chrome实验性Network Information API的React实现代码：

import { useState } from 'react';

function WifiSsidDetector() {
  const [currentSsid, setCurrentSsid] = useState('');
  const [errorMsg, setErrorMsg] = useState('');

  const fetchWifiSsid = async () => {
    try {
      // 检查浏览器API支持情况
      if (!navigator.connection?.getNetworkInterfaces) {
        throw new Error('当前浏览器不支持WiFi信息获取功能');
      }

      // 获取所有网络接口
      const networkInterfaces = await navigator.connection.getNetworkInterfaces();
      // 筛选出WiFi类型的接口
      const wifiInterface = networkInterfaces.find(iface => iface.type === 'wifi');

      if (wifiInterface?.ssid) {
        setCurrentSsid(wifiInterface.ssid);
        setErrorMsg('');
      } else {
        throw new Error('未检测到WiFi连接，或无权限获取SSID');
      }
    } catch (err) {
      setErrorMsg(err.message);
      setCurrentSsid('');
    }
  };

  return (
    <div className="wifi-detector">
      <button onClick={fetchWifiSsid}>获取当前WiFi名称</button>
      {currentSsid && <p>当前WiFi SSID：{currentSsid}</p>}
      {errorMsg && <p style={{ color: '#dc3545' }}>{errorMsg}</p>}
    </div>
  );
}

export default WifiSsidDetector;

关键实践注意事项 #

• 触发条件限制：必须通过用户主动交互（如点击按钮）调用API，不能在组件挂载时自动执行，否则会被浏览器的安全策略拦截。
• 兼容性处理：实际项目中必须做好降级逻辑，比如API不支持时，引导用户手动输入SSID。
• 权限管理：用户首次触发时，浏览器会弹出权限请求，需引导用户允许；若用户拒绝，后续调用会直接报错。
• 环境要求：开发阶段可以用localhost测试，但生产环境必须部署在HTTPS域名下，否则API会直接失效。

实际项目中的替代方案 #

如果需要兼容多浏览器，无后端支持的情况下没有通用解决方案，只能通过以下方式替代：

• 引导用户手动输入当前WiFi SSID；
• 若有后端配合，可通过后端获取设备IP对应的网络信息（但这也无法直接拿到SSID，仅能做间接判断）。

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