首页 前端知识 【vue js】PC端获取主机id、IP地址、主机名

【vue js】PC端获取主机id、IP地址、主机名

2024-02-05 11:02:12 前端知识 前端哥 745 3 我要收藏

(暂未实现需求,在网上找的machine-id包只能获取服务器的信息,fingerprintjs包同一台设备不同浏览器获取的id不同)
需求描述:在用户登录时,前端需要获取主机id、IP地址、主机名,传给后端

以下是使用api获取IP地址

import axios,{AxiosInstance, AxiosRequestConfig,AxiosResponse}  from "axios";
axios.get("https://api.ipify.org?format=json").then((res:any)=>{
          console.log(res,'ip')
          $storage.set('ip',res.data.ip)//讲获取到的IP地址存到缓存
        }).catch((e:any)=>{
          console.error(e,'获取ip error');
        })  

以下是使用machine-id包的步骤
1.安装包 npm i node-machine-id
2.在vue.config.js文件中复制粘贴如下代码

//获取主机id和IP地址
const os = require("os");

function getNetworkIp() {
  let needHost = ""; // 打开的host
  try {
    // 获得网络接口列表
    let network = os.networkInterfaces();
    for (let dev in network) {
      let iface = network[dev];
      for (let i = 0; i < iface.length; i++) {
        let alias = iface[i];
        if (alias.family === "IPv4" && alias.address !== "127.0.0.1" && !alias.internal) {
          needHost = alias.address;
        }
      }
    }
  } catch (e) {
    needHost = "localhost";
  }
  return needHost;
}

const myHost = getNetworkIp();
const myName = os.hostname();
process.env.VUE_APP_HOST = myHost;//IP地址
process.env.VUE_APP_NAME = myName;//主机名
//生成设备id
const idObj = require("node-machine-id");
let id = idObj.machineIdSync({ original: true });

process.env.VUE_APP_MACHINEID = id;//设备id

3.在你需要的地方直接使用process.env.VUE_APP_HOST(IP地址)、process.env.VUE_APP_NAME(主机名)、process.env.VUE_APP_MACHINEID(设备id)
4.需要重跑项目!!
打印出来是下图这个样子
在这里插入图片描述
以下是使用fingerprintjs2包获取浏览器指纹id
同一台设备不同浏览器获取的指纹id不同

//安装fingerprintjs2包
npm i fingerprintjs2 -S

//引入
import Fingerprint2 from 'fingerprintjs2'
// 调用,一般是在main.js或者vuex里面调用
Fingerprint2.get(function(components:any) {
  const values = components.map(function(component:any,index:any) {
    if (index === 0) { //把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
      return component.value.replace(/\bNetType\/\w+\b/, '')
    }
    return component.value
  })
  // 生成最终id murmur 
  console.log(values,'使用的浏览器信息')  //使用的浏览器信息
  const murmur = Fingerprint2.x64hash128(values.join(''), 31)
  console.log(murmur,'生成的标识码') //生成的标识码
})
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1309.html
标签
tcp/ip
评论
会员中心 联系我 留言建议 回顶部
复制成功!