aida_front/src/views/setIdentification.vue

<template>
    <div class="identification_page">
        <div>序号：<input v-model="setId" type="text" autofocus /></div>
        <div>密钥：<input type="text" /></div>
        <div class="button" @click="setFingerprint2('set')">记录浏览器标识</div>
        <div class="button" @click="setFingerprint2('delete')">注销浏览器标识</div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed } from "vue";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import HeaderComponent from "@/component/HomePage/Header.vue";
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
import router from "@/router/index";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
import Fingerprint2 from "fingerprintjs2"; //获取浏览器唯一标识
export default defineComponent({
    components: {
        HeaderComponent,
        HistoryDetail,
        RobotAssist,
    },
    setup() {
        let collectionList: any = ref([]);
        let userInfo: any = {};
        let status: any = ref(0);
        let voluntarily: any = ref(false);
        let setId: any = ref();
        return {
            collectionList,
            userInfo,
            status,
            voluntarily,
			setId,
        };
    },
    data() {
        return {};
    },
    mounted() {
        // this.userInfo = JSON.parse(getCookie("userInfo") as any);
        // if (this.userInfo.userId == 83) {
        // } else {
        // 	router.replace("/home");
        // 	return
        // }
    },
    methods: {
        async setFingerprint2(str:any) {
			let murmur:any = ''
			await new Promise((resolve,reject)=>{
				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
					murmur = Fingerprint2.x64hash128(values.join(""), 31);
					resolve('')
				});
			})
			let data = {
				browserIdentifiers:murmur,
				id:this.setId
			}
			// console.log(data);
			// return
			
			if(str == 'set'){
				// return
				Https.axiosPost(Https.httpUrls.addNoLoginRequiredNew, data)
				.then((rv) => {
					localStorage.setItem('murmurStr',murmur)
					const htmlContent = rv
					const blob = new Blob([htmlContent], { type: "text/html" });
					const downloadLink = document.createElement("a");
					downloadLink.href = URL.createObjectURL(blob);
					downloadLink.download = "AiDA.html";
					downloadLink.click();
					localStorage.setItem('id',this.setId)
					message.success('Created successfully');
				})
				.catch((res) => {
				});
			}else{
				data.id = ''
				Https.axiosPost(Https.httpUrls.deleteNoLoginRequiredNew, data)
				.then((rv) => {
					message.success('successfully delete');
					localStorage.removeItem('murmurStr')
					localStorage.removeItem('id')
					setCookie("isMurmur", false);
					WriteCookie("token");
				})
				.catch((res) => {
				});
			}
			
        },
    },
});
</script>
<style lang="less">
.identification_page {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    input {
        padding-left: 10px;
        border: 2px solid rgba(0, 0, 0, 0.2);
        border-radius: 10px;
		margin-top: 20px;
    }
    .button {
        margin-top: 20px;
        border: 2px solid;
        border-radius: 20px;
        padding: 0 20px;
        cursor: pointer;
    }
}
</style>