perf(X-Pack): Optimize third-party authentication platform integration

Author: fit2cloud-chenyw

frontend/src/stores/user.ts

@@ -81,7 +81,10 @@ export const UserStore = defineStore('user', {
     },
 
     async logout() {
-      const param = { ...{ token: this.token }, ...this.platformInfo }
+      let param = { token: this.token }
+      if (wsCache.get('user.platformInfo')) {
+        param = { ...param, ...wsCache.get('user.platformInfo') }
+      }
       const res: any = await AuthApi.logout(param)
       this.clear()
       if (res) {

frontend/src/views/login/index.vue

@@ -1,5 +1,13 @@
 <template>
-  <div class="login-container">
+  <div
+    v-if="showLoading"
+    v-loading="true"
+    :element-loading-text="t('qa.loading')"
+    class="xpack-login-handler-mask"
+    element-loading-background="#F5F6F7"
+  ></div>
+
+  <div class="login-container" :class="{ 'hide-login-container': showLoading }">
     <div class="login-left">
       <img :src="bg" alt="" />
     </div>
@@ -52,7 +60,11 @@
               }}</el-button>
             </el-form-item>
           </el-form>
-          <Handler ref="xpackLoginHandler" jsname="L2NvbXBvbmVudC9sb2dpbi9IYW5kbGVy" />
+          <Handler
+            ref="xpackLoginHandler"
+            v-model:loading="showLoading"
+            jsname="L2NvbXBvbmVudC9sb2dpbi9IYW5kbGVy"
+          />
         </div>
       </div>
     </div>
@@ -71,6 +83,7 @@ import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import loginImage from '@/assets/blue/login-image_blue.png'
 import Handler from './xpack/Handler.vue'
 
+const showLoading = ref(true)
 const router = useRouter()
 const userStore = useUserStore()
 const appearanceStore = useAppearanceStoreWithOut()
@@ -194,8 +207,18 @@ const submitForm = () => {
     }
   }
 }
-
+.hide-login-container {
+  display: none;
+}
 :deep(.ed-input__wrapper) {
   background-color: #f5f7fa;
 }
+.xpack-login-handler-mask {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 999;
+}
 </style>

frontend/src/views/login/xpack/Handler.vue

@@ -50,7 +50,13 @@ import { loadClient, type LoginCategory } from './PlatformClient'
 // import { logoutHandler } from '@/utils/logout'
 import { useI18n } from 'vue-i18n'
 // import PlatformError from './PlatformError.vue'
-
+defineProps<{
+  loading: boolean
+}>()
+const emits = defineEmits(['switchTab', 'autoCallback', 'update:loading'])
+const updateLoading = (show: boolean) => {
+  emits('update:loading', show)
+}
 const { t } = useI18n()
 interface Categoryparam {
   category: string
@@ -71,7 +77,6 @@ const saml2Handler = ref()
     ready: false,
   },
 }) */
-const emits = defineEmits(['switchTab', 'autoCallback'])
 const init = (cb?: () => void) => {
   queryCategoryStatus()
     .then((res) => {
@@ -195,6 +200,10 @@ const casLogin = () => {
       setTimeout(() => {
         // logoutHandler(true, true)
         platformLoginMsg.value = e?.message || e
+        setTimeout(() => {
+          window.location.href =
+            window.location.origin + window.location.pathname + window.location.hash
+        }, 2000)
       }, 1500)
     })
 }
@@ -363,13 +372,22 @@ const callBackType = () => {
 } */
 
 onMounted(() => {
+  // eslint-disable-next-line no-undef
+  const obj = LicenseGenerator.getLicense()
+  if (obj?.status !== 'valid') {
+    updateLoading(false)
+    return
+  }
   wsCache.delete('de-platform-client')
   init(async () => {
     const state = callBackType()
     if (state?.includes('cas') && getQueryString('ticket')) {
       // platformLogin(1)
       casLogin()
-    } /*  else if (window.location.pathname.includes('/oidcbi/')) {
+    } else {
+      updateLoading(false)
+    }
+    /*  else if (window.location.pathname.includes('/oidcbi/')) {
       platformLogin(2)
     } else if (state?.includes('dingtalk')) {
       await dingtalkToken()