Vue获取IP地址详解

一、前言

在前端开发中，有时候需要获取用户的IP地址，以便做一些后续的处理。本文将从多个方面对Vue获取IP地址做详细阐述。

二、前端Vue获取IP地址

Vue作为一种流行的前端框架，如何获取IP地址呢？可以使用浏览器端Javascript来实现。具体代码如下：

async function fetchIP() {
  const res = await fetch('https://api.ipify.org?format=json')
  const json = await res.json()
  return json.ip
}

const ip = await fetchIP()
console.log(ip)

上述代码可以通过调用ipify.org提供的API获取本机IP地址。通过await 可以等待异步请求的结果并返回IP地址。

三、Vue获取内网IP地址

如果需要获取内网IP地址，只能通过客户端进行获取。可以使用WebRTC API来实现，代码如下：

function getInternalIPAddress() {
  return new Promise(function (resolve, reject) {
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    if (window.RTCPeerConnection) {
      var rtc = new RTCPeerConnection({
        iceServers: []
      });
      if (1 || window.mozRTCPeerConnection) {
        rtc.createDataChannel('', {
          reliable: false
        });
      };
      rtc.onicecandidate = function (evt) {
        if (evt.candidate) grepSDP("a=" + evt.candidate.candidate);
      };
      rtc.createOffer(function (offerDesc) {
        grepSDP(offerDesc.sdp);
        rtc.setLocalDescription(offerDesc);
      }, function (e) {
        console.warn("offer failed", e);
      });

      var addrs = Object.create(null);
      addrs["0.0.0.0"] = false;

      var rSplit = /(^\d+|\.[^.]+)/g;

      function grepSDP(sdp) {
        var hosts = [];
        sdp.split('\r\n').forEach(function (line, index, arr) {
          if (~line.indexOf("a=candidate")) {
            var parts = line.split(' '),
              addr = parts[4],
              type = parts[7];
            if (type === 'host') {
              var s = addr.split(rSplit);
              s.pop();
              hosts.push(s.join(''));
            }
          } else if (~line.indexOf("c=")) {
            var parts = line.split(' '),
              addr = parts[2];
            var s = addr.split(rSplit);
            s.pop();
            hosts.push(s.join(''));
          }
        });

        hosts.forEach(function (host) {
          addrs[host] = true;
        });
      }

      setTimeout(function () {
        Object.keys(addrs).some(function (k) {
          if (addrs[k])
            resolve(k);
        });
      }, 1500);
    } else {
      reject("WebRTC not supported");
    }
  });
}

getInternalIPAddress().then(function (ip) {
  console.log(ip);
}).catch(function (e) {
  console.error(e);
});

上述代码使用WebRTC API来获取内网IP地址。通过调用getInternalIPAddress()方法并使用.then()返回结果。

四、Vue获取服务器IP地址

如果需要获取服务器端的IP地址，可以通过后端提供的API来获取。以Node.js为例，可以使用以下代码实现：

const os = require('os');

function getServerIP() {
  const ifaces = os.networkInterfaces();
  let ip = '';
  Object.keys(ifaces).forEach((ifname) => {
    ifaces[ifname].forEach((iface) => {
      if (iface.family !== 'IPv4' || iface.internal !== false) {
        return;
      }
      ip = iface.address;
    });
  });
  return ip;
}

const ip = getServerIP();
console.log(ip);

上述代码可以通过Node.js内置的os模块获取服务器端的IP地址。通过调用getServerIP()方法即可获取。

五、Vue获取客户端IP地址

如果需要获取客户端IP地址，可以通过后端提供的API来获取。以Node.js为例，可以使用以下代码实现：

const requestIp = require('request-ip');

function getClientIP(req) {
  const clientIp = requestIp.getClientIp(req);
  return clientIp;
}

const clientIp = getClientIP(req);
console.log(clientIp);

上述代码可以通过使用request-ip模块获取客户端IP地址。通过调用getClientIP(req)方法传入请求参数即可获取。

六、Vue获取本地IP地址

获取本地IP地址可以通过使用Java Applet来实现。代码如下：

<script src="https://www.java.com/js/deployJava.js"></script>
<script>
  var attributes = {
    id: 'getLocalIPAddress',
    code: 'GetLocalIPAddress.class',
    archive: 'GetLocalIPAddress.jar',
    width: 0,
    height: 0
  };
  var parameters = {
    codebase_lookup: false
  };
  deployJava.runApplet(attributes, parameters, '1.6');
</script>

上述代码虽然可以获取本地IP地址，但需要先安装Java Applet并在前端使用<applet>标签来调用。因此不建议使用。

七、Vue获取本地IP地址

如果需要获取用户的IP地址，可以通过后端提供的API来获取。以Node.js为例，可以使用以下代码实现：

const requestIp = require('request-ip');

function getUserIP(req) {
  const userIp = requestIp.getClientIp(req);
  return userIp;
}

const userIp = getUserIP(req);
console.log(userIp);

上述代码可以通过使用request-ip模块获取用户IP地址。调用getUserIP(req)方法传入请求参数即可获取。

八、Vue获取客户端IP地址（使用window对象）

如果需要通过window对象来获取客户端IP地址，可以使用以下代码实现：

function getClientIP() {
  let ip = ''
  fetch('https://api.ipify.org')
    .then((response) => {
      return response.text()
    })
    .then((data) => {
      ip = data
    })
    .catch(() => {});

  return ip
}

const clientIp = getClientIP();
console.log(clientIp);

上述代码可以通过调用ipify.org提供的API获取本机IP地址，通过fetch请求返回结果。但由于fetch是异步的，需要使用Promise来获取返回结果。

九、Vue自动获取IP地址上不了网

如果自动获取IP地址失败无法上网，可以手动获取本机IP地址。可以使用命令行工具（如Windows下的cmd或Linux下的Terminal）来实现，代码如下：

ipconfig (Windows)
ifconfig (Linux)

上述代码可以手动打开命令行工具，并输入相应指令来查看本机IP地址。