ws连接请求增加sign验签机制

src/api/wsConnect.js

@@ -1,6 +1,8 @@
 import { Msg, Header, MsgType } from '@/proto/msg'
 import { proto } from '@/const/msgConst'
 import { userStore } from '@/stores'
+import { v4 as uuidv4 } from 'uuid'
+import { generateSign } from '@/utils/common'
 
 class WsConnect {
   /**
@@ -18,11 +20,6 @@ class WsConnect {
     return WsConnect.instance
   }
 
-  /**
-   * 用户数据
-   */
-  userData
-
   /**
    * WebSockt连接对象
    */
@@ -80,7 +77,6 @@ class WsConnect {
    * 构造函数
    */
   constructor() {
-    this.userData = userStore()
     this.buffer = new Uint8Array()
     this.isConnect = false
 
@@ -101,8 +97,12 @@ class WsConnect {
       return
     }
     console.log('create websocket')
-    const token = await this.userData.getAccessToken()
-    this.url = `${import.meta.env.VITE_WS_URL}?token=${token}`
+    const userData = userStore()
+    const token = await userData.getAccessToken()
+    const traceId = uuidv4()
+    const timestamp = Math.floor(new Date().getTime() / 1000)
+    const sign = generateSign(userData.at.secret, `${traceId}${timestamp}`)
+    this.url = `${import.meta.env.VITE_WS_URL}?traceId=${traceId}&timestamp=${timestamp}&sign=${sign}&token=${token}`
     this.connect = new WebSocket(this.url)
     this.connect.onmessage = this.onMessage.bind(this)
     this.connect.onclose = this.onClose.bind(this)

src/utils/common.js

@@ -1,3 +1,5 @@
+import CryptoJS from 'crypto-js'
+
 export const maskPhoneNum = (str) => {
   if (str.length < 7) {
     return '*'
@@ -138,3 +140,12 @@ export const messageBoxShowTime = (datatime) => {
 
   return `${year}-${month}-${day} ${hours}:${minutes}`
 }
+
+export const generateSign = (key, content) => {
+  try {
+    const hash = CryptoJS.HmacSHA256(content, key)
+    return CryptoJS.enc.Base64.stringify(hash)
+  } catch (e) {
+    return null
+  }
+}

src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { userStore } from '@/stores'
 import router from '@/router'
-import CryptoJS from 'crypto-js'
+import { generateSign } from './common'
 import { v4 as uuidv4 } from 'uuid'
 
 const baseURL = '/api' //配合vite.config.js中的代理配置解决跨域问题
@@ -11,15 +11,6 @@ const instance = axios.create({
   timeout: 3000
 })
 
-const generateSign = (key, content) => {
-  try {
-    const hash = CryptoJS.HmacSHA256(content, key)
-    return CryptoJS.enc.Base64.stringify(hash)
-  } catch (e) {
-    return null
-  }
-}
-
 // 请求拦截器
 instance.interceptors.request.use(
   async (config) => {
@@ -27,19 +18,19 @@ instance.interceptors.request.use(
     if (config.url === '/user/refreshToken' && userData.rt.token !== '') {
       const traceId = uuidv4()
       const timestamp = Math.floor(new Date().getTime() / 1000)
-      const sigh = generateSign(userData.rt.secret, `${traceId}${timestamp}`)
+      const sign = generateSign(userData.rt.secret, `${traceId}${timestamp}`)
       config.headers.traceId = traceId
       config.headers.timestamp = timestamp
-      config.headers.sign = sigh
+      config.headers.sign = sign
       config.headers.refreshToken = userData.rt.token
     } else if (userData.at.token !== '') {
       const token = await userData.getAccessToken()
       const traceId = uuidv4()
       const timestamp = Math.floor(new Date().getTime() / 1000)
-      const sigh = generateSign(userData.at.secret, `${traceId}${timestamp}`)
+      const sign = generateSign(userData.at.secret, `${traceId}${timestamp}`)
       config.headers.traceId = traceId
       config.headers.timestamp = timestamp
-      config.headers.sign = sigh
+      config.headers.sign = sign
       config.headers.accessToken = token
     }
     return config