首次登录生成clientId并保存

src/api/user.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
-import { CLIENT_ID } from '@/const/userConst'
 import { getReqBody } from '@/api/common'
+import { userStore } from '@/stores'
 
 export const userRegisterService = ({ username, password }) => {
   return request.post(
@@ -14,9 +14,10 @@ export const userRegisterService = ({ username, password }) => {
 }
 
 export const userLoginService = ({ username, password }) => {
+  const userData = userStore()
   return request.post(
     '/user/login',
-    getReqBody({ account: username, password: password, clientId: CLIENT_ID })
+    getReqBody({ account: username, password: password, clientId: userData.clientId })
   )
 }
 

src/const/userConst.js

@@ -1,4 +1,3 @@
 export const CLIENT_TYPE = 2
 export const CLIENT_NAME = 'web'
 export const CLIENT_VERSION = '0.0.1'
-export const CLIENT_ID = 'XXAA'

src/stores/user.js

@@ -69,6 +69,12 @@ export const userStore = defineStore(
       isRemenberMe.value = flag
     }
 
+    const clientId = ref('')
+
+    const setClientId = (id) => {
+      clientId.value = id
+    }
+
     return {
       at,
       rt,
@@ -81,7 +87,9 @@ export const userStore = defineStore(
       setUser,
       isAtExpired,
       isRemenberMe,
-      setIsRemenberMe
+      setIsRemenberMe,
+      clientId,
+      setClientId
     }
   },
   {

src/utils/common.js

@@ -37,3 +37,12 @@ export const getFontColor = (backgroundColor) => {
   // 根据亮度确定对比明显的字体颜色
   return brightness > 128 ? '#000000' : '#FFFFFF'
 }
+
+export const generateClientId = () => {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+  let clientId = ''
+  for (let i = 0; i < 8; i++) {
+    clientId += characters[Math.floor(Math.random() * characters.length)]
+  }
+  return clientId
+}

src/utils/request.js

@@ -51,23 +51,19 @@ instance.interceptors.request.use(
 instance.interceptors.response.use(
   (res) => {
     if (res.data.code === 0) {
-      console.log('0a 请求成功，请求是：' + res.config.url)
       return res
     }
 
-    console.log('0b 请求响应结果码不是预期，请求是：' + res.config.url)
     ElMessage.error(res.data.desc || '服务异常')
     return Promise.reject(res.data)
   },
   async (err) => {
     if (err.response?.status === 403) {
       // 403表示访问禁止，由于AccessToken过期导致，所以凡是403请求均刷新token后重发
-      console.log('0c 请求 ' + err.config.url + ' 出现了403，准备刷新token并重发这个请求')
       const retryRes = await refreshTokenAndRetry(err.config)
       return Promise.resolve(retryRes)
     } else if (err.response?.status === 401) {
       // 401错误返回登录页
-      console.log('0d 请求 ' + err.config.url + ' 出现了401，直接报错处理')
       router.push('/login')
       ElMessage.error('您还未登录，请先登录')
     } else {
@@ -82,8 +78,6 @@ let isRefreshing = false
 let requestsQueue = []
 
 const refreshTokenAndRetry = (config) => {
-  console.log('01 准备发送refreshtoken请求，触发者是：' + config.url)
-
   const userData = userStore()
   const traceId = uuidv4()
   const timestamp = Math.floor(new Date().getTime() / 1000)
@@ -91,10 +85,8 @@ const refreshTokenAndRetry = (config) => {
 
   return new Promise((resolve, reject) => {
     if (isRefreshing) {
-      console.log('02 进入等待队列，触发者是：' + config.url)
       requestsQueue.push({ resolve, reject, config })
     } else {
-      console.log('03 开始refreshtoken，触发者是：' + config.url)
       isRefreshing = true
       axios
         .post(
@@ -116,16 +108,13 @@ const refreshTokenAndRetry = (config) => {
         .then(async (refreshRes) => {
           if (refreshRes.data.code === 0) {
             userData.setAt(refreshRes.data.data.accessToken)
-            console.log('04 得到refreshtoken正常结果，触发者是：' + config.url)
             const res = await instance(config)
             resolve(res)
-            console.log('05 处理instance(config)，触发者是：' + config.url)
 
             while (requestsQueue.length > 0) {
               const { resolve, config } = requestsQueue.shift()
               const res = await instance(config)
               resolve(res)
-              console.log('06 处理队列任务，触发者是：' + config.url)
             }
           } else {
             ElMessage.error(refreshRes.data.desc || '服务异常')

src/views/LoginPage.vue

@@ -4,6 +4,8 @@ import { ref, watch, onMounted } from 'vue'
 import router from '@/router'
 import { userRegisterService, userLoginService } from '@/api/user.js'
 import { userStore } from '@/stores'
+import { generateClientId } from '@/utils/common'
+
 const isRegister = ref(false)
 
 // 提交的整个form表单的数据
@@ -85,6 +87,10 @@ onMounted(() => {
   if (isRemenberMe.value) {
     formModel.value.username = userData.user.account
   }
+
+  if (!userData.clientId) {
+    userData.setClientId(generateClientId())
+  }
 })
 
 watch(isRegister, () => {