vue封装一个方法获取用户的公网IP

在开发前端应用的过程中，有时我们需要获取用户的公网IP地址。本文将介绍如何通过Vue封装一个方法，来获取用户的公网IP。

1. IP地址的获取方式

在正式介绍Vue的封装方法之前，我们首先需要了解几种获取用户IP地址的方式。

1.1 通过服务器端获取

在服务器端，我们可以获取到连接到服务器的用户IP地址。常见的方式包括：

使用request对象的Remote_Addr属性获取用户的IP地址，如在Node.js中可以使用req.headers['x-forwarded-for'] || req.connection.remoteAddress来获取。
通过第三方服务接口获取用户的IP地址，如淘宝IP接口、百度IP接口等。

1.2 通过前端方式获取

前端获取用户IP地址的方式有限，因为前端无法直接获取到用户真实的公网IP地址。常见的方式包括：

使用window.RTCPeerConnection来获取临时的本地IP地址，但该方法并不能获取到用户的真实IP地址，而是用户设备所处的局域网地址。
通过第三方服务接口获取用户的IP地址，并将结果返回给前端。这种方式需要发送请求到第三方接口来获取真实的公网IP地址。

2. Vue封装获取用户公网IP的方法

在Vue中，我们可以封装一个方法来获取用户的公网IP地址。下面是一个示例代码：

// 在Vue组件中定义一个计算属性
computed: {
  userPublicIP() {
    return this.$axios.get('https://api.ipify.org?format=json')
      .then(res => res.data.ip)
      .catch(error => {
        console.log(error);
        return '';
      });
  }
}

在这个示例中，我们使用了axios来发送请求。通过向https://api.ipify.org发送GET请求，可以获取到用户的公网IP。res.data.ip返回的就是用户的公网IP地址。

需要注意的是，这个方法返回的是一个Promise对象，需要在组件中进行处理。在使用该方法时，可以直接使用userPublicIP属性来获取用户的公网IP地址。

3. 使用封装的方法获取用户公网IP

为了演示如何使用封装的方法获取用户的公网IP地址，我们可以创建一个Vue组件并应用上述方法。下面是一个简单的示例代码：

<template>
  <div>
    <p>当前用户的公网IP地址是: {{ publicIP }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      publicIP: ''
    }
  },
  mounted() {
    this.getUserPublicIP();
  },
  methods: {
    async getUserPublicIP() {
      try {
        this.publicIP = await this.userPublicIP;
      } catch (error) {
        console.log(error);
        this.publicIP = '获取IP地址失败';
      }
    }
  },
  computed: {
    userPublicIP() {
      return this.$axios.get('https://api.ipify.org?format=json')
        .then(res => res.data.ip)
        .catch(error => {
          console.log(error);
          return '';
        });
    }
  }
}
</script>

在这个示例中，我们在mounted方法中调用了getUserPublicIP方法来获取用户的公网IP地址，并将结果赋值给publicIP变量。然后在模版中使用插值的方式将公网IP地址显示出来。

这样，当组件加载完成后，用户的公网IP地址将会在页面上显示出来。如果获取IP地址失败，会在控制台输出错误信息，并将publicIP变量设为’获取IP地址失败’。

4. 运行示例代码

为了运行上述示例代码，我们需要安装Vue和axios。我们可以使用以下命令来搭建一个简单的Vue项目：

$ vue create ip-address-app

然后在项目根目录下安装axios：

$ cd ip-address-app
$ npm install axios

接下来，我们可以创建一个Vue组件文件UserIP.vue，并将示例代码复制进去。最后，在根组件App.vue中引入和使用UserIP组件：

<template>
  <div id="app">
    <UserIP />
  </div>
</template>

<script>
import UserIP from './components/UserIP.vue';

export default {
  name: 'App',
  components: {
    UserIP
  }
}
</script>

最后，我们可以使用以下命令来运行Vue项目：