引入 fingerprintjs 获取浏览器指纹, 并存放在 cookie 的 fp 字段

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@fingerprintjs/fingerprintjs": "^4.6.2",
     "@liripeng/vue-audio-player": "^1.5.0",
     "@tinymce/tinymce-vue": "^3.0.1",
     "ali-oss": "^6.21.0",

src/utils/auth.js

@@ -1,3 +1,6 @@
+import Vue from 'vue'
+import FingerprintJS from '@fingerprintjs/fingerprintjs'
+
 const USER_ACCESS_TOKEN = 'ACCESS-TOKEN'
 const USER_REFRESH_TOKEN = 'REFRESH-TOKEN'
 const USER_INFO = 'TNB-USERINFO'
@@ -95,3 +98,23 @@ export function removeAll() {
   localStorage.removeItem(USER_REFRESH_TOKEN)
   localStorage.removeItem(USER_INFO)
 }
+
+/**
+ * 浏览器指纹
+ */
+export async function getBrowserFingerprint() {
+  // 初始化FingerprintJS
+  const fp = await FingerprintJS.load()
+  // 获取访问者的指纹
+  const result = await fp.get()
+  const {
+    plugins,
+    ...components
+  } = result.components
+  const extendedComponents = {
+    ...components
+  }
+  // const deviceInfo = JSON.stringify(extendedComponents)
+  const fingerprintId = FingerprintJS.hashComponents(extendedComponents)
+  Vue.$cookies.set('fp', fingerprintId, -1)
+}

src/utils/request.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 import store from '@/store'
 import Vue from 'vue'
 import router from '@/router'
-import { getAccessToken, removeAll } from '@/utils/auth'
+import { getAccessToken, getBrowserFingerprint, removeAll } from '@/utils/auth'
 
 const instance = axios.create({
   // 域名
@@ -29,6 +29,9 @@ instance.interceptors.request.use(config => {
     // 在请求的 Authorization 首部添加 token
     config.headers.Authorization = 'Bearer ' + token
   }
+  if (Vue.$cookies.get('fp') === null) {
+    getBrowserFingerprint()
+  }
   return config
 }, error => {
   return Promise.reject(error)