From 759e205bfb479b3174e1cf3b388e04ec58490e7d Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 13 Oct 2023 14:42:49 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=A1=AE=E8=AE=A4?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Apps/AccountListTable/ViewSecret.vue      |  15 ++-
 .../Apps/UserConfirmDialog/index.vue          | 100 ++++++++----------
 .../ListTable/TableAction/ExportDialog.vue    |  29 ++---
 src/layout/components/Page/index.vue          |   8 +-
 src/main.js                                   |   3 +-
 src/router/profile/index.js                   |   2 +-
 src/utils/const.js                            |   6 ++
 src/utils/request.js                          |  35 ++++--
 src/views/accounts/Account/AccountList.vue    |   4 +-
 src/views/profile/ApiKey.vue                  |  25 +----
 src/views/profile/PassKey.vue                 |   7 +-
 src/views/profile/ProfileInfo.vue             |  40 +++----
 12 files changed, 122 insertions(+), 152 deletions(-)
 create mode 100644 src/utils/const.js

diff --git a/src/components/Apps/AccountListTable/ViewSecret.vue b/src/components/Apps/AccountListTable/ViewSecret.vue
index 76a60004e..69baac16c 100644
--- a/src/components/Apps/AccountListTable/ViewSecret.vue
+++ b/src/components/Apps/AccountListTable/ViewSecret.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <UserConfirmDialog :handler="getAuthInfo" @onConfirmDone="showSecretDialog" />
     <Dialog
       :destroy-on-close="true"
       :show-cancel="false"
@@ -61,7 +60,6 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
 import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/crypto'
 
@@ -70,7 +68,6 @@ export default {
   components: {
     Dialog,
     PasswordHistoryDialog,
-    UserConfirmDialog,
     ShowKeyCopyFormatter
   },
   props: {
@@ -124,6 +121,7 @@ export default {
         this.versions = resp.count
       })
     }
+    this.showSecretDialog()
   },
   methods: {
     accountConfirmHandle() {
@@ -140,13 +138,12 @@ export default {
         this.$message.success(this.$tc('common.updateSuccessMsg'))
       })
     },
-    getAuthInfo() {
-      return this.$axios.get(this.url, { disableFlashErrorMsg: true })
-    },
     showSecretDialog(res) {
-      this.secretInfo = res
-      this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
-      this.showSecret = true
+      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(() => {
+        this.secretInfo = res
+        this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
+        this.showSecret = true
+      })
     },
     exit() {
       this.$emit('update:visible', false)
diff --git a/src/components/Apps/UserConfirmDialog/index.vue b/src/components/Apps/UserConfirmDialog/index.vue
index afa42e35f..6bb6c2da6 100644
--- a/src/components/Apps/UserConfirmDialog/index.vue
+++ b/src/components/Apps/UserConfirmDialog/index.vue
@@ -1,5 +1,6 @@
 <template>
   <Dialog
+    :destory-on-close="true"
     :show-cancel="false"
     :show-confirm="false"
     :title="title"
@@ -17,7 +18,7 @@
             :title="$tc('auth.ReLoginTitle')"
             center
             style="margin-bottom: 20px;"
-            type="info"
+            type="error"
           />
         </el-col>
       </el-row>
@@ -102,64 +103,60 @@ export default {
       confirmTypeRequired: '',
       subTypeChoices: [],
       secretValue: '',
-      visible: false
+      visible: false,
+      callback: null,
+      cancel: null,
+      processing: false
     }
   },
   computed: {
     showPassword() {
       return this.confirmTypeRequired === 'password'
-    },
-    iHandler() {
-      if (this.handler === null) {
-        return () => this.$axios.get(this.url, { disableFlashErrorMsg: true })
-      }
-      return this.handler
-    }
-  },
-  watch: {
-    visible(val) {
-      if (!val) {
-        this.$emit('onConfirmCancel', true)
-      }
     }
   },
   mounted() {
-    this.performConfirm()
+    // const onRecvCallback = _.debounce(this.performConfirm, 500)
+    this.$eventBus.$on('showConfirmDialog', this.performConfirm)
   },
   methods: {
     handleSubTypeChange(val) {
       this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
       this.smsWidth = val === 'sms' ? 6 : 0
     },
-    performConfirm() {
-      this.iHandler().then((res) => {
-        this.$emit('onConfirmDone', res)
-      }).catch((err) => {
-        const confirmType = err.response.data?.code
-        const confirmUrl = '/api/v1/authentication/confirm/'
-        this.$axios.get(confirmUrl, { params: { confirm_type: confirmType }}).then((data) => {
-          this.subTypeChoices = data.content
-          this.confirmTypeRequired = data.confirm_type
+    performConfirm({ response, callback, cancel }) {
+      if (this.processing || this.visible) {
+        return
+      }
+      this.processing = true
+      this.callback = callback
+      this.cancel = cancel
+      this.$log.debug('perform confirm action')
+      const confirmType = response.data?.code
+      const confirmUrl = '/api/v1/authentication/confirm/'
+      this.$axios.get(confirmUrl, { params: { confirm_type: confirmType }}).then((data) => {
+        this.confirmTypeRequired = data.confirm_type
 
-          if (this.confirmTypeRequired === 'relogin') {
-            const data = {
-              confirm_type: this.confirmTypeRequired,
-              secret_key: ''
-            }
-            this.$axios.post(confirmUrl, data, { disableFlashErrorMsg: true }).then(() => {
-              this.afterConfirm()
-            }).catch(() => {
-              this.title = this.$t('auth.NeedReLogin')
-            })
-            return
-          }
-          const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
-          this.subTypeSelected = defaultSubType.name
-          this.inputPlaceholder = defaultSubType.placeholder
-          this.visible = true
-        }).catch(() => {
-          this.$emit('AuthMFAError', true)
-        })
+        if (this.confirmTypeRequired === 'relogin') {
+          this.$axios.post(confirmUrl, { 'confirm_type': 'relogin', 'secret_key': 'x' }).then(() => {
+            this.callback()
+            this.visible = false
+          }).catch(() => {
+            this.title = this.$t('auth.NeedReLogin')
+            this.visible = true
+          })
+        }
+        this.subTypeChoices = data.content
+        const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
+        this.subTypeSelected = defaultSubType.name
+        this.inputPlaceholder = defaultSubType.placeholder
+        this.visible = true
+      }).catch((err) => {
+        const data = err.response?.data
+        const msg = data?.error || data?.detail || data?.msg || this.$t('common.GetConfirmTypeFailed')
+        this.$message.error(msg)
+        this.cancel(err)
+      }).finally(() => {
+        this.processing = false
       })
     },
     logout() {
@@ -183,16 +180,10 @@ export default {
         }, 1000)
       })
     },
-    afterConfirm() {
-      this.iHandler().then(res => {
-        this.$emit('onConfirmDone', res)
-      }).catch((e) => {
-        this.$emit('onHandlerError', e)
-      }).finally(() => {
-        this.visible = false
-      })
-    },
     handleConfirm() {
+      if (this.confirmTypeRequired === 'relogin') {
+        return this.logout()
+      }
       if (this.subTypeSelected === 'otp' && this.secretValue.length !== 6) {
         return this.$message.error(this.$tc('common.MFAErrorMsg'))
       }
@@ -202,7 +193,8 @@ export default {
         secret_key: this.secretValue
       }
       this.$axios.post(`/api/v1/authentication/confirm/`, data).then(res => {
-        this.afterConfirm()
+        this.callback()
+        this.visible = false
       })
     }
   }
diff --git a/src/components/Table/ListTable/TableAction/ExportDialog.vue b/src/components/Table/ListTable/TableAction/ExportDialog.vue
index c2a0663d4..101055e33 100644
--- a/src/components/Table/ListTable/TableAction/ExportDialog.vue
+++ b/src/components/Table/ListTable/TableAction/ExportDialog.vue
@@ -1,13 +1,5 @@
 <template>
   <div>
-    <div v-if="mfaDialogShow">
-      <UserConfirmDialog
-        :url="confirmUrl"
-        @AuthMFAError="handleAuthMFAError"
-        @onConfirmCancel="handleExportCancel"
-        @onConfirmDone="showExportDialog"
-      />
-    </div>
     <Dialog
       v-if="exportDialogShow"
       :destroy-on-close="true"
@@ -40,7 +32,9 @@
               :disabled="!option.can"
               :label="option.value"
               class="export-item"
-            >{{ option.label }}</el-radio>
+            >
+              {{ option.label }}
+            </el-radio>
           </el-radio-group>
         </el-form-item>
       </el-form>
@@ -50,15 +44,13 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
 import { createSourceIdCache } from '@/api/common'
 import * as queryUtil from '@/components/Table/DataTable/compenents/el-data-table/utils/query'
 
 export default {
   name: 'ExportDialog',
   components: {
-    Dialog,
-    UserConfirmDialog
+    Dialog
   },
   props: {
     selectedRows: {
@@ -107,11 +99,10 @@ export default {
   },
   data() {
     return {
+      meta: {},
       exportDialogShow: false,
       exportOption: 'all',
       exportTypeOption: 'csv',
-      meta: {},
-      mfaVerified: false,
       mfaDialogShow: false,
       confirmUrl: '/api/v1/accounts/account-secrets/?limit=1'
     }
@@ -189,12 +180,10 @@ export default {
         this.exportDialogShow = true
         return
       }
-      // 这是需要校验 MFA 的
-      if (!this.mfaDialogShow) {
-        this.mfaDialogShow = true
-      } else {
+      this.$axios.get('/api/v1/authentication/confirm/check/?confirm_type=mfa').then(() => {
+        console.log('>>>>>>>>>>>>> ok le ')
         this.exportDialogShow = true
-      }
+      })
     },
     downloadCsv(url) {
       const a = document.createElement('a')
@@ -231,13 +220,11 @@ export default {
     async handleExportConfirm() {
       await this.handleExport()
       this.exportDialogShow = false
-      this.mfaDialogShow = false
     },
     handleExportCancel() {
       const vm = this
       setTimeout(() => {
         vm.exportDialogShow = false
-        vm.mfaDialogShow = false
       }, 100)
     },
     handleAuthMFAError() {
diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue
index c0058ea9e..52858e407 100644
--- a/src/layout/components/Page/index.vue
+++ b/src/layout/components/Page/index.vue
@@ -15,7 +15,7 @@
       </el-alert>
       <slot />
     </PageContent>
-    <UserConfirmDialog v-if="showConfirmDialog" :handler="testIt" />
+    <UserConfirmDialog />
   </div>
 </template>
 
@@ -56,17 +56,11 @@ export default {
         return true
       }
       return window.history.length <= 2
-    },
-    showConfirmDialog() {
-      return this.$store.state.common.confirmDialogVisible
     }
   },
   methods: {
     handleGoBack() {
       this.goBack.bind(this)()
-    },
-    testIt() {
-      return this.$axios.post('/api/v1/authentication/access-keys/')
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index 0423c2979..652198e45 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,7 @@ import App from './App'
 import store from './store'
 import router from './router'
 import i18n from './i18n/i18n'
+import { eventBus } from './utils/const'
 
 import '@/icons' // icon
 import '@/guards' // permission control
@@ -65,7 +66,7 @@ Vue.prototype.$message = message
 Vue.prototype.$xss = xss
 
 // 注册全局事件总线
-Vue.prototype.$eventBus = new Vue()
+Vue.prototype.$eventBus = eventBus
 new Vue({
   el: '#app',
   i18n,
diff --git a/src/router/profile/index.js b/src/router/profile/index.js
index ce453beb9..7ead3f181 100644
--- a/src/router/profile/index.js
+++ b/src/router/profile/index.js
@@ -53,7 +53,7 @@ export default {
       meta: { title: i18n.t('route.PersonalInformationImprovement'), permissions: [] }
     },
     {
-      path: '/profile/key',
+      path: '/profile/apikeys',
       component: () => import('@/views/profile/ApiKey'),
       name: 'ApiKey',
       meta: {
diff --git a/src/utils/const.js b/src/utils/const.js
new file mode 100644
index 000000000..ad42cac02
--- /dev/null
+++ b/src/utils/const.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+
+export const eventBus = new Vue()
+export default {
+  eventBus
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 26f81cd9f..f793066fd 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,5 +1,6 @@
 import axios from 'axios'
 import i18n from '@/i18n/i18n'
+import { eventBus } from '@/utils/const'
 import { getTokenFromCookie } from '@/utils/auth'
 import { getErrorResponseMsg } from '@/utils/common'
 import { refreshSessionIdAge } from '@/api/users'
@@ -76,10 +77,6 @@ function ifUnauthorized({ response, error }) {
   }
 }
 
-function ifConfirmRequired({ response, error }) {
-
-}
-
 function ifBadRequest({ response, error }) {
   if (response.status === 400) {
     if (response.data?.detail) {
@@ -123,6 +120,19 @@ function refreshSessionAgeDelay(response) {
   }, 30 * 1000)
 }
 
+function ifConfirmRequired({ response, error }) {
+  console.log('Response is ', response)
+  return new Promise((resolve, reject) => {
+    if (response.status === 412) {
+      const callback = () => resolve()
+      const cancel = () => reject()
+      eventBus.$emit('showConfirmDialog', { response, callback, cancel })
+    } else {
+      reject()
+    }
+  })
+}
+
 // response interceptor
 service.interceptors.response.use(
   /**
@@ -146,17 +156,22 @@ service.interceptors.response.use(
     }
     return res
   },
-  error => {
+  async error => {
     // NProgress.done()
     if (!error.response) {
       return Promise.reject(error)
     }
-
     const response = error.response
-    ifUnauthorized({ response, error })
-    ifBadRequest({ response, error })
-    ifConfirmRequired({ response, error })
-    flashErrorMsg({ response, error })
+
+    ifConfirmRequired({ response, error }).then(() => {
+      return service(error.config)
+    }).catch(() => {
+      // on cancel error: err
+    })
+
+    await ifUnauthorized({ response, error })
+    await ifBadRequest({ response, error })
+    await flashErrorMsg({ response, error })
     return Promise.reject(error)
   }
 )
diff --git a/src/views/accounts/Account/AccountList.vue b/src/views/accounts/Account/AccountList.vue
index 9484c4958..0cdae78e4 100644
--- a/src/views/accounts/Account/AccountList.vue
+++ b/src/views/accounts/Account/AccountList.vue
@@ -47,11 +47,11 @@ export default {
       cursor: pointer;
     }
 
-    & > > > .table-content {
+    & >>> .table-content {
       margin-left: 21px;
     }
 
-    & ::v-deep .el-table__row {
+    & >>> .el-table__row {
       height: 40px;
 
       & > td {
diff --git a/src/views/profile/ApiKey.vue b/src/views/profile/ApiKey.vue
index 414c8a80f..58c6ad49c 100644
--- a/src/views/profile/ApiKey.vue
+++ b/src/views/profile/ApiKey.vue
@@ -6,12 +6,6 @@
       :help-message="helpMessage"
       :table-config="tableConfig"
     />
-    <UserConfirmDialog
-      v-if="mfaDialogVisible"
-      :handler="createAccessKey"
-      @close="mfaDialogVisible = false"
-      @onConfirmDone="showAccessKeyDialog"
-    />
     <Dialog
       :show-cancel="false"
       :title="$tc('profile.CreateAccessKey')"
@@ -40,21 +34,17 @@
 import { GenericListPage } from '@/layout/components'
 import { DateFormatter } from '@/components/Table/TableFormatters'
 import Dialog from '@/components/Dialog/index.vue'
-import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
 
 export default {
   components: {
-    UserConfirmDialog,
     Dialog,
     GenericListPage
   },
   data() {
     const ajaxUrl = '/api/v1/authentication/access-keys/'
-    const vm = this
     return {
       mfaUrl: '',
       mfaDialogVisible: false,
-      createAccessKey: () => vm.$axios.post(ajaxUrl),
       helpMessage: this.$t('setting.helpText.ApiKeyList'),
       warningText: this.$t('profile.ApiKeyWarning'),
       visible: false,
@@ -129,10 +119,10 @@ export default {
             type: 'primary',
             can: () => this.$hasPerm('authentication.add_accesskey'),
             callback: function() {
-              this.mfaDialogVisible = false
-              setTimeout(() => {
-                this.mfaDialogVisible = true
-              }, 100)
+              this.$axios.post(ajaxUrl).then(res => {
+                this.key = res
+                this.visible = true
+              })
             }.bind(this)
           }
         ]
@@ -145,13 +135,6 @@ export default {
     }
   },
   methods: {
-    showAccessKeyDialog(res) {
-      this.key = res
-      this.visible = true
-      setTimeout(() => {
-        this.mfaDialogVisible = false
-      })
-    }
   }
 }
 </script>
diff --git a/src/views/profile/PassKey.vue b/src/views/profile/PassKey.vue
index 2b38c579c..fdd8accea 100644
--- a/src/views/profile/PassKey.vue
+++ b/src/views/profile/PassKey.vue
@@ -9,6 +9,7 @@
       :show-buttons="false"
       :title="$tc('auth.AddPassKey')"
       :visible.sync="dialogVisible"
+      width="600px"
     >
       <AutoDataForm v-bind="form" @submit="onAddConfirm" />
     </Dialog>
@@ -105,8 +106,7 @@ export default {
             type: 'primary',
             can: () => this.$hasPerm('authentication.add_passkey'),
             callback: function() {
-              this.$store.dispatch('common/showConfirmDialog', true)
-              // this.dialogVisible = true
+              this.dialogVisible = true
             }.bind(this)
           }
         ]
@@ -134,6 +134,9 @@ export default {
         this.getRefsListTable.reloadTable()
         this.$message.success(this.$tc('common.createSuccessMsg'))
       }).catch((error) => {
+        if (error.response.status === 412) {
+          return
+        }
         alert(error)
       })
     },
diff --git a/src/views/profile/ProfileInfo.vue b/src/views/profile/ProfileInfo.vue
index 38c642e77..6376e34c8 100644
--- a/src/views/profile/ProfileInfo.vue
+++ b/src/views/profile/ProfileInfo.vue
@@ -1,12 +1,5 @@
 <template>
   <Page v-bind="$attrs">
-    <UserConfirmDialog
-      v-if="showPasswordDialog"
-      :url="confirmUrl"
-      :visible.sync="showPasswordDialog"
-      @onConfirmCancel="exit"
-      @onConfirmDone="verifyDone"
-    />
     <div>
       <el-row :gutter="20">
         <el-col :md="14" :sm="24">
@@ -35,7 +28,6 @@
 import Page from '@/layout/components/Page'
 import DetailCard from '@/components/Cards/DetailCard'
 import QuickActions from '@/components/QuickActions'
-import UserConfirmDialog from '@/components/Apps/UserConfirmDialog'
 import { toSafeLocalDateStr } from '@/utils/common'
 import store from '@/store'
 
@@ -44,8 +36,7 @@ export default {
   components: {
     Page,
     DetailCard,
-    QuickActions,
-    UserConfirmDialog
+    QuickActions
   },
   props: {
     object: {
@@ -72,7 +63,7 @@ export default {
           callbacks: {
             click: function() {
               this.currentEdit = 'wecom'
-              this.showPasswordDialog = true
+              this.verifyDone()
             }.bind(this)
           }
         },
@@ -89,7 +80,7 @@ export default {
           callbacks: {
             click: function() {
               this.currentEdit = 'dingtalk'
-              this.showPasswordDialog = true
+              this.verifyDone()
             }.bind(this)
           }
         },
@@ -106,7 +97,7 @@ export default {
           callbacks: {
             click: function() {
               this.currentEdit = 'feishu'
-              this.showPasswordDialog = true
+              this.verifyDone()
             }.bind(this)
           }
         },
@@ -298,7 +289,7 @@ export default {
     confirmUrl() {
       return '/api/v1/authentication/confirm-oauth/'
     },
-    bindOrUNBindUrl() {
+    bindOrUnbindUrl() {
       let url = ''
       if (!this.object[`${this.currentEdit}_id`]) {
         url = `/core/auth/${this.currentEdit}/qr/bind/?redirect_url=${this.$route.fullPath}`
@@ -344,16 +335,17 @@ export default {
       return backendList
     },
     verifyDone() {
-      const url = this.bindOrUNBindUrl
-      if (!this.object[`${this.currentEdit}_id`]) {
-        window.open(url, 'Bind', 'width=800,height=600')
-      } else {
-        this.$axios.post(url).then(res => {
-          this.$message.success(this.$tc('common.updateSuccessMsg'))
-          this.$store.dispatch('users/getProfile')
-        })
-      }
-      this.showPasswordDialog = false
+      this.$axios.get(this.confirmUrl).then(() => {
+        const url = this.bindOrUnbindUrl
+        if (!this.object[`${this.currentEdit}_id`]) {
+          window.open(url, 'Bind', 'width=800,height=600')
+        } else {
+          this.$axios.post(url).then(res => {
+            this.$message.success(this.$tc('common.updateSuccessMsg'))
+            this.$store.dispatch('users/getProfile')
+          })
+        }
+      })
     },
     exit() {
       this.$emit('update:visible', false)