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

Question

我的网站查找不同的 IP 地址以查看它们是否是已知威胁。我在其中放置了一个按钮，该按钮通过 Vue.js 被 link 编辑并在单击时将用户的 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>

这是我网站的 link 以便更容易理解我要做什么：https://people.rit.edu/sns9181/igme330/Threat-Visualizer/

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

Answer 1

这个问题是关于 JS 和 "how get client's IP in JS"，而不是关于 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方法

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

Using Vue.js to get the user's IP Address

javascript

ip-address

vue.js