vue 获取用户ip,在vue项目中获取用户ip地址
今天在写项目掉接口的时候有一个接口需要到了用户的ip地址,查了半天觉得这个方法不错,也不要引入第三方的插件。我自己觉得还不错,就记下来以备不时之需首先在data里添加一个ip为空data() {return {ip: ''};}然后在methods里面写上getUserIP(onNewIP) {let MyPeerConnection = window.RTCPeerConnection || w
今天在写项目掉接口的时候有一个接口需要到了用户的ip地址,查了半天觉得这个方法不错,也不要引入第三方的插件。我自己觉得还不错,就记下来以备不时之需
首先在data里添加一个ip为空
data() {
return {
ip: ''
};
}
然后在methods里面写上
getUserIP(onNewIP) {
let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
let pc = new MyPeerConnection({
iceServers: []
});
let noop = () => {
};
let localIPs = {};
let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
let 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里面调用在methods里面的那个方法getUserIP()
this.getUserIP((ip) => {
this.ip = ip;
});
这样this.ip就是用户当前的ip地址了
对了,有的浏览器获取到的是IPv4地址,有的是IPv6地址
更多推荐
所有评论(0)