如何在React应用中获取设备MAC地址？适配get-mac-address包ES6语法

Hey there! I've got you covered here, but first let's clarify a critical point that might save you some frustration:

Important Note: The get-mac-address package is designed for Node.js environments, not browser-based React apps. Browsers enforce strict security policies that prevent JavaScript from accessing a device's MAC address directly—so you can't use this package directly in client-side React code.

With that out of the way, let's break down the correct implementation based on your use case:

Case 1: You're using React in a Node.js environment (e.g., Next.js API Routes, Electron Main Process) #

If you're working in a Node.js context (like backend API routes for a React app, or the main process of an Electron app), you can use ES6 import syntax to replace the require call. Here's how:

Step 1: Install the package #

First, add it to your project dependencies:

npm install get-mac-address
# or
yarn add get-mac-address

Step 2: Import and use the package with ES6 syntax #

Instead of var getMacAddress = require("get-mac-address"), use the ES6 import statement:

import getMacAddress from 'get-mac-address';

Example: Next.js API Route

You can create a backend endpoint to fetch the MAC address, then call that endpoint from your React frontend:

// pages/api/fetchMac.js
import getMacAddress from 'get-mac-address';

export default async function handler(req, res) {
  try {
    const macInfo = getMacAddress();
    res.status(200).json({ macAddress: macInfo });
  } catch (err) {
    res.status(500).json({ error: 'Failed to retrieve MAC address' });
  }
}

Example: React Frontend Component

Now fetch the data from your component:

import { useState, useEffect } from 'react';

function MacAddressDisplay() {
  const [macAddress, setMacAddress] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchMac = async () => {
      try {
        const response = await fetch('/api/fetchMac');
        const data = await response.json();
        if (data.macAddress) {
          setMacAddress(data.macAddress);
        } else {
          setError(data.error);
        }
      } catch (err) {
        setError('Failed to connect to server');
      }
    };

    fetchMac();
  }, []);

  return (
    <div className="mac-display">
      {macAddress ? (
        <p>MAC Address: <strong>{macAddress}</strong></p>
      ) : error ? (
        <p className="error-message">Oops: {error}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default MacAddressDisplay;

Example: Electron + React

If you're building an Electron app, use the package in the main process (Node.js environment) and send the MAC address to your React renderer via IPC:

// Main Process (main.js)
import { app, BrowserWindow, ipcMain } from 'electron';
import getMacAddress from 'get-mac-address';

ipcMain.handle('get-mac-address', async () => {
  try {
    return getMacAddress();
  } catch (err) {
    throw new Error('Failed to get MAC address');
  }
});

// Rest of your Electron setup...

// React Renderer Component
import { useState, useEffect } from 'react';
import { ipcRenderer } from 'electron';

function ElectronMacDisplay() {
  const [macAddress, setMacAddress] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchMac = async () => {
      try {
        const mac = await ipcRenderer.invoke('get-mac-address');
        setMacAddress(mac);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchMac();
  }, []);

  return (
    <div>
      {macAddress ? (
        <p>Your Device MAC: <strong>{macAddress}</strong></p>
      ) : error ? (
        <p>Error: {error}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default ElectronMacDisplay;

Case 2: You're working in a pure browser-based React app #

If you're trying to get the MAC address directly in a client-side React app (like a standard Create React App project), this is not possible. Browsers block access to low-level hardware information like MAC addresses to protect user privacy and security.

Your only option here is to move the MAC address retrieval logic to a backend server (Node.js, Python, etc.), then have your React app fetch that data from the server.

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