前端获取本地ip地址

在某些场合的情况下 后台可能需要前端电脑的ip 因为每台电脑的ip不一样 所有需要动态获取 翻翻网上写的很多 里面其实是很坑的 因为都是在调用闭包函数 所以执行起来是没有任何问题的 但是 你页面想拿的时候 你是没法拿到的 

下面就一vue 为例子 来获取一下 思路就是传入函数的回调获取参数 

1. 在utils下面建立一个getIp.js

function getUserIP(func:any){
    if(typeof window != 'undefined'){
            var RTCPeerConnection:any = window.RTCPeerConnection ||  window.webkitRTCPeerConnection;
        // window.mozRTCPeerConnection ||
            if (RTCPeerConnection) (()=>{
        
                var rtc = new RTCPeerConnection()
        
                rtc.createDataChannel(''); //创建一个可以发送任意数据的数据通道
        
                rtc.createOffer(( offerDesc:any )=> { //创建并存储一个sdp数据
        
                rtc.setLocalDescription(offerDesc)
        
            }, (e:any) => { console.log(e)})
        
            rtc.onicecandidate =(evt:any) => { //监听candidate事件
        
                if (evt.candidate) {
        
                    console.log('evt:',evt.candidate)
        
                    let ip_rule:any = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
        
                    var ip_addr:any = ip_rule.exec(evt.candidate.candidate)[1]
                    // this.test(ip_addr);//调用方法把ip地址的值传出去
                    func(ip_addr)
                }}
            })()
        }
}
export {
    getUserIP
}

2.页面使用

import { getUserIP } from "./getIp"
var Ip = ""
if(!localStorage.getItem('ipInfo')){
  function test(ip:any){
    Ip = ip
    localStorage.setItem('ipInfo',ip)
  }
  getUserIP(test)
}