fix: 组织与用户接口token失效时主动弹出登录窗口

src/ui/src/api/index.js

@@ -15,7 +15,7 @@ import md5 from 'md5'
 import has from 'has'
 import { $error } from '@/magicbox'
 import i18n, { language } from '@/i18n'
-import { showLoginModal } from '@blueking/login-modal'
+import { showLoginModal } from '@/utils/login-helper'
 import CachedPromise from './_cached-promise'
 import RequestQueue from './_request-queue'
 import customHeaders from './custom-header'
@@ -176,7 +176,7 @@ function handleReject(error, config) {
   }
 
   if (error.code && error.code === TokenInvalidCode) {
-    window.loginModal.show()
+    showLoginModal()
   }
 
   if (Axios.isCancel(error)) {
@@ -186,20 +186,7 @@ function handleReject(error, config) {
     const { status, data } = error.response
     const nextError = { message: error.message, status }
     if (status === 401) {
-      const successUrl = `${window.location.origin}/static/login_success.html`
-
-      const siteLoginUrl = window.Site.login
-      if (!siteLoginUrl) {
-        console.error('Login URL not configured!')
-        return
-      }
-
-      const loginURL = new URL(siteLoginUrl)
-      loginURL.searchParams.set('c_url', successUrl)
-      const pathname = loginURL.pathname.endsWith('/') ? loginURL.pathname : `${loginURL.pathname}/`
-      const loginUrl = `${loginURL.origin}${pathname}plain/${loginURL.search}`
-
-      showLoginModal({ loginUrl })
+      showLoginModal()
     } else if (data && data.bk_error_msg) {
       nextError.message = data.bk_error_msg
     } else if (status === 403) {

src/ui/src/components/ui/form/user.vue

@@ -23,6 +23,7 @@
       v-model="localValue"
       :class="{ 'has-fast-select': fastSelect }"
       :empty-text="$t('无匹配人员')"
+      :data-error-handler="errorHandler"
       @focus="$emit('focus')"
       @blur="$emit('blur')">
     </blueking-user-selector>
@@ -33,6 +34,8 @@
   import BluekingUserSelector from '@blueking/user-selector'
   import { mapGetters } from 'vuex'
   import Vue from 'vue'
+  import { showLoginModal } from '@/utils/login-helper'
+
   export default {
     name: 'cmdb-form-objuser',
     components: {
@@ -141,6 +144,11 @@
           value.splice(0, value.length, this.userName)
         }
         this.localValue = value
+      },
+      errorHandler(res) {
+        if (res.code === 1306000) {
+          showLoginModal()
+        }
       }
     }
   }

src/ui/src/main.js

@@ -24,6 +24,7 @@ import cmdbUI from './components/ui'
 import cmdbSearchComponent from './components/search/index'
 import routerActions from './router/actions'
 import tools from './utils/tools'
+import { gotoLoginPage } from '@/utils/login-helper'
 import clipboard from 'vue-clipboard2'
 import './magicbox'
 import './directives'
@@ -58,17 +59,7 @@ api.get(`${window.API_HOST}is_login`).then(() => {
   })
 })
   .catch(() => {
-    if (!window.Site.login) {
-      console.error('The login URL is not configured!')
-      return
-    }
-    try {
-      const loginURL = new URL(window.Site.login)
-      loginURL.searchParams.set('c_url', location.href)
-      location.href = loginURL.href
-    } catch (_) {
-      console.error('The login URL invalid!')
-    }
+    gotoLoginPage()
   })
 
 if (process.env.COMMIT_ID) {

src/ui/src/utils/login-helper.js

@@ -0,0 +1,44 @@
+/*
+ * Tencent is pleased to support the open source community by making 蓝鲸 available.
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { showLoginModal as showModal } from '@blueking/login-modal'
+
+export const showLoginModal = () => {
+  const successUrl = `${window.location.origin}/static/login_success.html`
+
+  const siteLoginUrl = window.Site.login
+  if (!siteLoginUrl) {
+    console.error('Login URL not configured!')
+    return
+  }
+
+  const loginURL = new URL(siteLoginUrl)
+  loginURL.searchParams.set('c_url', successUrl)
+  const pathname = loginURL.pathname.endsWith('/') ? loginURL.pathname : `${loginURL.pathname}/`
+  const loginUrl = `${loginURL.origin}${pathname}plain/${loginURL.search}`
+
+  showModal({ loginUrl })
+}
+
+export const gotoLoginPage = () => {
+  if (!window.Site.login) {
+    console.error('The login URL is not configured!')
+    return
+  }
+  try {
+    const loginURL = new URL(window.Site.login)
+    loginURL.searchParams.set('c_url', location.href)
+    location.href = loginURL.href
+  } catch (_) {
+    console.error('The login URL invalid!')
+  }
+}