详解Vue获取IP地址

小蓝 • 2024-12-10 18:17 • 编程

一、Vue获取IP地址

在Web开发中，我们通常需要获取用户的IP地址信息。Vue作为一款优秀的前端框架，也提供了多种方式来获取IP地址。

二、Vue获取IP地址的方法

在Vue中，我们可以使用以下几种方式来获取IP地址：

1. 使用第三方库，如ipify
2. 使用浏览器的API navigator对象
3. 发送HTTP请求获取

三、Vue获取IP取到的域名

如果使用第三方库ipify来获取IP地址，它会返回一个包含IP地址的JSON对象，其中包含当前IP地址所对应的域名信息。示例如下：

import axios from 'axios';

axios.get('https://api.ipify.org?format=json')
  .then(response => {
    console.log(response.data.ip);
    console.log(response.data.domain);
  })
  .catch(error => {
    console.log(error);
  });

四、Vue获取IP和端口号

在使用浏览器的API navigator对象来获取IP地址时，可以通过navigator.connection属性来获取当前设备的IP地址和端口号信息。示例如下：

console.log(navigator.connection.localAddress);
console.log(navigator.connection.localPort);

五、Vue获取IP地址城市

我们可以通过访问第三方的IP地址查询服务，获取到IP地址所对应的城市信息。示例如下：

axios.get('http://ip-api.com/json')
  .then(response => {
    console.log(response.data.city);
  })
  .catch(error => {
    console.log(error);
  });

六、Vue获取IP地址无效

由于某些原因，我们可能无法正确获取到IP地址信息。在这种情况下，可以使用本地存储或其他手段对这些用户进行区分。示例如下：

if (!navigator.connection.localAddress) {
  localStorage.setItem('userType', 'unknown');
} else {
  localStorage.setItem('userType', 'known');
}

七、Vue获取IP和MAC地址

同样是通过访问浏览器API，我们也可以获取到设备的MAC地址信息。示例如下：

var peer = new RTCPeerConnection();
peer.createDataChannel('');
peer.createOffer(offer => {
  peer.setLocalDescription(offer, function() {});
}, function() {});

peer.onicecandidate = function(event){
  if(event.candidate){
    console.log(event.candidate.candidate.match(/(?:IP|MAC|CAND) \d+.\d+.\d+/gm));
  }
};

八、Vue获取IP后面的路径

在Vue中，我们也可以通过window.location对象获取当前页面的IP地址路径信息。示例如下：

console.log(window.location.pathname);

九、Vue获取本地IP

如果需要获取本机的IP地址，可以通过执行网络I/O命令（例如ping）获取到本机的IP地址信息。示例如下：

const os = require('os');
const { exec } = require('child_process');
 
function getLocalIp() {
  exec("ping -c 1 google.com", (err, stdout, stderr) => {
    if (err) {
      console.error(err);
      return;
    }
 
    const regex = /([0-9]{1,3}\.){3}[0-9]{1,3}/g;
    const match = stdout.match(regex);
    const addresses = match.filter((address) => {
      return address !== '127.0.0.1';
    });

    console.log(addresses);
  });
}
 
getLocalIp();

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/230540.html