使用Vue.js获取用户的IP地址

时间:2019-12-17 21:39:49

标签: javascript vue.js ip-address

我的网站查找了不同的IP地址,以查看它们是否是已知威胁。我在其中放置了一个通过Vue.js链接的按钮,并单击以使其将用户的IP地址推送到输入框。 尝试获取用户的IP地址时遇到很多麻烦。

此外,我不需要任何jquery,因为每当尝试使用它时都会引发错误。

这是我的js代码的简化版本:

let app = new Vue({
    el: '#app',
    data: {
    term: localStorage.getItem("searchTerm")
    },
    methods: {
     showYourIP()
    {
      this.term = //User's IP Address
    }
}});

调用它的HTML是:

<button class="button" id="yourIP" @click="showYourIP">Show Your IP</button>

这里是指向我的网站的链接,因此更容易理解我的工作:https://people.rit.edu/sns9181/igme330/Threat-Visualizer/

您可以通过右键单击并检查页面来查看我的整个代码,如果这样更容易。

1 个答案:

答案 0 :(得分:1)

这个问题是关于JS的,以及“如何在JS中获取客户的IP”,而不是关于Vue;)

但是要点: 您应该从某些api获取ip,例如https://www.ipify.org/ 当您将请求发送到 https://api.ipify.org?format=json 时,您将获得JSON

{"ip":"257.1.1.1"}

看看这个

fetch('https://api.ipify.org?format=json')
.then(x => x.json())
.then(({ ip }) => {
    this.term = ip;
});

将其放入showYourIp方法