vue项目中如何获取当前网络本机分配的IP?

7,144 阅读1分钟

需求

页面需要加上水印,加上当前登陆终端(浏览器)所连接网络的IP,那么问题是如何获取当前所连网络的IP呢?

解决方案

最容易想到的是从nodejs os.networkInterfaces() 模块中直接获取不就完事了吗?

试了一下,发现拿到的是空对象

mounted () {
    console.log(require('os').networkInterfaces())
},

为空的原因期望看到的大佬评论补充,自己也将持续探索~


第一种获取方式

代码如下

定义方法:

methods: {
    // 获取当前网络ip
    getUserIP (onNewIP) {
      const MyPeerConnection =
        window.RTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.webkitRTCPeerConnection

      const pc = new MyPeerConnection({
        iceServers: []
      })
      const noop = () => {}
      const localIPs = {}
      const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g
      const iterateIP = (ip) => {
        if (!localIPs[ip]) onNewIP(ip)
        localIPs[ip] = true
      }

      pc.createDataChannel('')

      pc.createOffer()
        .then((sdp) => {
          sdp.sdp.split('\n').forEach(function (line) {
            if (line.indexOf('candidate') < 0) return

            line.match(ipRegex).forEach(iterateIP)
          })

          pc.setLocalDescription(sdp, noop, noop)
        })
        .catch((reason) => {})

      pc.onicecandidate = (ice) => {
        if (
          !ice ||
          !ice.candidate ||
          !ice.candidate.candidate ||
          !ice.candidate.candidate.match(ipRegex)
        ) { return }

        ice.candidate.candidate.match(ipRegex).forEach(iterateIP)
      }
    }
   }

用到的地方获取:

mounted () {
    this.getUserIP((rs) => {
      console.log(rs)
    })
},

备注

获取不到可能是因为chrome浏览器版本过高,需要修改浏览器配置如下

    1. 在chrome地址栏输入:chrome://flags/#enable-webrtc-hide-local-ips-with-mdns
    1. 把 Anonymize local IPs exposed by WebRTC 设置为 disabled。

第二种获取方式(推荐)

在vue.config.js中webpack构建时定义process.env属性,这样全局可获得


// 获取本机ip
function getIpAdress () {
  const interfaces = require('os').networkInterfaces()
  for (const devName in interfaces) {
    const iface = interfaces[devName]
    for (let i = 0; i < iface.length; i++) {
      const alias = iface[i]
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address
      }
    }
  }
}


module.exports = {
    ...,
    config.plugin('define').tap(args => {
      args[0]['process.env'].CURRENT_IP = JSON.stringify(getIpAdress())
      return args
    })
  },
  ...
}

后记

经验证, 第二种方式获取的是打包的那台电脑的IP,不可使用; 第一种方式因为不能确保每一个浏览器都设置打开webRTC,所以也放弃了。 最终还是从后端获取IP了,~~~~~

记录一下,有用自取!