(暂未实现需求,在网上找的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,'生成的标识码') //生成的标识码
})