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

(暂未实现需求,在网上找的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,'生成的标识码') //生成的标识码
})
  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
你好!关于Vue 3无法访问`$router`的问题,可能有几个原因导致。 首先,请确保你已经正确地安装了Vue Router,并在Vue应用中进行了配置。你可以在创建Vue应用时选择手动安装Vue Router,或者通过命令行安装: ```bash npm install vue-router ``` 然后,在你的Vue应用入口文件中(比如`main.js`),需要引入Vue Router,并使用`use`方法将其添加到Vue实例中。类似于以下代码: ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App) .use(router) .mount('#app') ``` 请确保你已经创建了一个名为`router.js`的文件,并在其中定义了你的路由配置。例如: ```javascript import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, // 其他路由配置... ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 在你的组件中,你应该能够通过`this.$router`来访问到Vue Router实例。请确保你正在使用Vue 3的语法,其中访问`$router`应该使用`setup()`函数来获取。例如: ```javascript import { onMounted, ref } from 'vue' export default { setup() { const router = this.$router // 这里使用setup()函数获取$router const data = ref('') onMounted(() => { // 使用router进行导航等操作 router.push('/about') }) return { data } } } ``` 请确保你已经按照以上步骤操作,并检查是否有其他错误导致无法访问`$router`。如果问题仍然存在,请提供更多的代码和错误信息,以便我们能够更好地帮助你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值