perf: improve the login process

Author: vince292007

apps/web-antd/src/apis/modules/mock.ts

@@ -1,7 +1,7 @@
 import { requestClient } from '#/forward';
 
 /**
- * 模拟人意状态码
+ * 模拟任意状态码
  */
 async function getMockStatus(status: string) {
   return requestClient.get('/mock/status', { params: { status } });

apps/web-antd/src/layouts/basic.vue

@@ -85,7 +85,11 @@ const menus = computed(() => [
 
 const appStore = useAppStore();
 const accessStore = useAccessStore();
-const { openLoginExpiredModal, userInfo } = toRefs(accessStore);
+const {
+  loading: loginLoading,
+  openLoginExpiredModal,
+  userInfo,
+} = toRefs(accessStore);
 const router = useRouter();
 
 async function handleLogout() {
@@ -126,6 +130,7 @@ function handleMakeAll() {
     <template #dialog>
       <AuthenticationLoginExpiredModal
         v-model:open="openLoginExpiredModal"
+        :loading="loginLoading"
         password-placeholder="123456"
         username-placeholder="vben"
         @submit="accessStore.authLogin"

apps/web-antd/src/store/modules/access.ts

@@ -8,13 +8,16 @@ import { useRouter } from 'vue-router';
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 import { useCoreAccessStore } from '@vben-core/stores';
 
+import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';
 
 import { getAccessCodes, getUserInfo, userLogin } from '#/apis';
+import { $t } from '#/locales';
 
 export const useAccessStore = defineStore('access', () => {
   const coreStoreAccess = useCoreAccessStore();
   const router = useRouter();
+
   const loading = ref(false);
 
   const openLoginExpiredModal = ref(false);
@@ -44,7 +47,7 @@ export const useAccessStore = defineStore('access', () => {
    */
   async function authLogin(
     params: LoginAndRegisterParams,
-    onSuccess?: () => Promise<void>,
+    onSuccess?: () => Promise<void> | void,
   ) {
     // 异步处理用户登录操作并获取 accessToken
     let userInfo: UserInfo | null = null;
@@ -72,10 +75,21 @@ export const useAccessStore = defineStore('access', () => {
         coreStoreAccess.setUserInfo(userInfo);
         coreStoreAccess.setAccessCodes(accessCodes);
 
-        openLoginExpiredModal.value = false;
-        onSuccess
-          ? await onSuccess?.()
-          : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+        if (openLoginExpiredModal.value) {
+          openLoginExpiredModal.value = false;
+        } else {
+          onSuccess
+            ? await onSuccess?.()
+            : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+        }
+
+        if (userInfo?.realName) {
+          notification.success({
+            description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
+            duration: 3,
+            message: $t('authentication.loginSuccess'),
+          });
+        }
       }
     } finally {
       loading.value = false;

apps/web-antd/src/store/modules/app.ts

@@ -12,7 +12,7 @@ export const useAppStore = defineStore('app', () => {
    * 重置所有状态
    */
   async function resetAppState() {
-    accessStore.$reset();
+    accessStore.reset();
     coreTabbarStore.$reset();
   }
 

apps/web-antd/src/views/_essential/authentication/login.vue

@@ -1,38 +1,18 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/universal-ui';
-
 import { AuthenticationLogin } from '@vben/universal-ui';
 
-import { App } from 'ant-design-vue';
-
-import { $t } from '#/locales';
 import { useAccessStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
 const accessStore = useAccessStore();
-const { notification } = App.useApp();
-
-/**
- * @param params 登录表单数据
- */
-async function handleLogin(params: LoginAndRegisterParams) {
-  const { userInfo } = await accessStore.authLogin(params);
-  if (userInfo?.realName) {
-    notification.success({
-      description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
-      duration: 3,
-      message: $t('authentication.loginSuccess'),
-    });
-  }
-}
 </script>
 
 <template>
   <AuthenticationLogin
     :loading="accessStore.loading"
     password-placeholder="123456"
     username-placeholder="vben"
-    @submit="handleLogin"
+    @submit="accessStore.authLogin"
   />
 </template>