feat(系统设置): 登录记住上一次的选择

frontend/src/App.vue

@@ -20,7 +20,7 @@
   import useAppStore from '@/store/modules/app';
   import useLicenseStore from '@/store/modules/setting/license';
   import { getQueryVariable } from '@/utils';
-  import { setLoginExpires, setToken } from '@/utils/auth';
+  import { setLoginExpires, setLongType, setToken } from '@/utils/auth';
   import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
   import { setFavicon, watchStyle, watchTheme } from '@/utils/theme';
 
@@ -90,29 +90,28 @@
       state.value = getQueryVariable('state') || '';
       if (state.value.split('#')[0] === 'fit2cloud-lark-qr') {
         try {
-          appStore.showLoading();
+          appStore.setLoginLoading(true);
           const larkCallback = await getLarkCallback(code || '');
           userStore.qrCodeLogin(larkCallback);
+          setLongType('LARK');
           setLoginExpires();
         } catch (err) {
           console.log(err);
-        } finally {
-          appStore.hideLoading();
         }
       }
       if (state.value.split('#')[0] === 'fit2cloud-lark-suite-qr') {
         try {
-          appStore.showLoading();
+          appStore.setLoginLoading(true);
           const larkCallback = await getLarkSuiteCallback(code || '');
           userStore.qrCodeLogin(larkCallback);
+          setLongType('LARK_SUITE');
           setLoginExpires();
         } catch (err) {
           console.log(err);
-        } finally {
-          appStore.hideLoading();
         }
       }
       await userStore.checkIsLogin();
+      appStore.setLoginLoading(false);
     }
     const { height } = useWindowSize();
     appStore.innerHeight = height.value;

frontend/src/store/modules/app/index.ts

@@ -48,6 +48,7 @@ const useAppStore = defineStore('app', {
     ...defaultSettings,
     loading: false,
     loadingTip: '',
+    loginLoading: false,
     topMenus: [] as RouteRecordRaw[],
     currentTopMenu: {} as RouteRecordRaw,
     breadcrumbList: [] as BreadcrumbItem[],
@@ -112,6 +113,9 @@ const useAppStore = defineStore('app', {
     getEnvList(state: AppState): EnvironmentItem[] {
       return state.envList;
     },
+    getLoginLoadingStatus(state: AppState): boolean {
+      return state.loginLoading;
+    },
   },
   actions: {
     /**
@@ -232,6 +236,12 @@ const useAppStore = defineStore('app', {
     resetSystemPackageType() {
       this.packageType = '';
     },
+    /**
+     * 设置登录页面的loading
+     */
+    setLoginLoading(value: boolean) {
+      this.loginLoading = value;
+    },
     /**
      * 获取系统版本
      */

frontend/src/store/modules/app/types.ts

@@ -22,6 +22,7 @@ export interface AppState {
   serverMenu: RouteRecordNormalized[];
   loading: boolean;
   loadingTip: string;
+  loginLoading: boolean;
   topMenus: RouteRecordRaw[];
   currentTopMenu: RouteRecordRaw;
   breadcrumbList: BreadcrumbItem[];

frontend/src/utils/auth.ts

@@ -3,6 +3,7 @@ import { WHITE_LIST_NAME } from '@/router/constants';
 
 const SESSION_ID = 'sessionId';
 const CSRF_TOKEN = 'csrfToken';
+const LOGIN_TYPE = 'loginType';
 
 const isLogin = async () => {
   try {
@@ -22,6 +23,14 @@ const setToken = (sessionId: string, csrfToken: string) => {
   localStorage.setItem(CSRF_TOKEN, csrfToken);
 };
 
+const setLongType = (loginType: string) => {
+  localStorage.setItem(LOGIN_TYPE, loginType);
+};
+
+const getLongType = () => {
+  return localStorage.getItem(LOGIN_TYPE);
+};
+
 const clearToken = () => {
   localStorage.removeItem(SESSION_ID);
   localStorage.removeItem(CSRF_TOKEN);
@@ -46,4 +55,4 @@ const isLoginExpires = () => {
   return diff > thirtyDay;
 };
 
-export { clearToken, getToken, hasToken, isLogin, isLoginExpires, setLoginExpires, setToken };
+export { clearToken, getLongType, getToken, hasToken, isLogin, isLoginExpires, setLoginExpires, setLongType, setToken };

frontend/src/views/login/components/dingTalkQrCode.vue

@@ -13,7 +13,7 @@
   import { NO_PROJECT_ROUTE_NAME, NO_RESOURCE_ROUTE_NAME } from '@/router/constants';
   import { useAppStore, useUserStore } from '@/store';
   import useLicenseStore from '@/store/modules/setting/license';
-  import { setLoginExpires } from '@/utils/auth';
+  import { setLoginExpires, setLongType } from '@/utils/auth';
   import { getFirstRouteNameByPermission, routerNameHasPermission } from '@/utils/permission';
 
   const { t } = useI18n();
@@ -47,6 +47,7 @@
         const { redirectUrl, authCode, state } = loginResult;
         const dingCallback = getDingCallback(authCode);
         userStore.qrCodeLogin(await dingCallback);
+        setLongType('DING_TALK');
         Message.success(t('login.form.login.success'));
         const { redirect, ...othersQuery } = router.currentRoute.value.query;
         const redirectHasPermission =

frontend/src/views/login/components/login-form.vue

@@ -16,7 +16,7 @@
         {{ t('login.form.accountLogin') }}
       </div>
       <div
-        v-if="isShowLDAP && userInfo.authenticate !== 'LOCAL'"
+        v-if="isShowLDAP && userInfo.authenticate === 'LDAP'"
         class="mb-7 text-[18px] font-medium text-[rgb(var(--primary-5))]"
         >{{ t('login.form.LDAPLogin') }}</div
       >
@@ -74,7 +74,7 @@
         </div>
       </a-form>
       <div v-if="showQrCodeTab">
-        <tab-qr-code :tab-name="activeName === 'WE_COM' ? 'WE_COM' : orgOptions[0].value"></tab-qr-code>
+        <tab-qr-code :tab-name="activeName ? activeName : orgOptions[0].value"></tab-qr-code>
       </div>
       <a-divider
         v-if="isShowLDAP || isShowOIDC || isShowOAUTH || isShowCAS || (isShowQRCode && orgOptions.length > 0)"
@@ -132,7 +132,7 @@
   import { useAppStore, useUserStore } from '@/store';
   import useLicenseStore from '@/store/modules/setting/license';
   import { encrypted } from '@/utils';
-  import { setLoginExpires } from '@/utils/auth';
+  import { getLongType, setLoginExpires, setLongType } from '@/utils/auth';
   import { getFirstRouteNameByPermission, routerNameHasPermission } from '@/utils/permission';
 
   import type { LoginData } from '@/models/user';
@@ -180,7 +180,7 @@
     username: string;
     password: string;
   }>({
-    authenticate: 'LOCAL',
+    authenticate: getLongType() || 'LOCAL',
     username: '',
     password: '',
   });
@@ -219,6 +219,7 @@
           password: encrypted(values.password),
           authenticate: userInfo.value.authenticate,
         } as LoginData);
+        setLongType(userInfo.value.authenticate);
         Message.success(t('login.form.login.success'));
         const { rememberPassword } = loginConfig.value;
         const { username, password } = values;
@@ -287,16 +288,14 @@
   async function initPlatformInfo() {
     try {
       const res = await getPlatformParamUrl();
-
+      if (getLongType() && getLongType() !== 'LOCAL' && getLongType() !== 'LDAP') {
+        showQrCodeTab.value = true;
+        activeName.value = getLongType() || 'WE_COM';
+      }
       orgOptions.value = res.map((e) => ({
         label: e.name,
         value: e.id,
       }));
-      res.forEach((e) => {
-        if (e.id === 'WE_COM') {
-          e.id = activeName.value;
-        }
-      });
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
@@ -331,6 +330,7 @@
           const config = JSON.parse(res.configuration);
           // eslint-disable-next-line no-eval
           const redirectUrl = eval(`\`${config.redirectUrl}\``);
+          setLongType('LOCAL');
           let url;
           if (authType === 'CAS') {
             url = `${config.loginUrl}?service=${encodeURIComponent(redirectUrl)}`;

frontend/src/views/login/components/weComQrCode.vue

@@ -12,7 +12,7 @@
   import { NO_PROJECT_ROUTE_NAME, NO_RESOURCE_ROUTE_NAME } from '@/router/constants';
   import { useAppStore, useUserStore } from '@/store';
   import useLicenseStore from '@/store/modules/setting/license';
-  import { setLoginExpires } from '@/utils/auth';
+  import { setLoginExpires, setLongType } from '@/utils/auth';
   import { getFirstRouteNameByPermission, routerNameHasPermission } from '@/utils/permission';
 
   import * as ww from '@wecom/jssdk';
@@ -48,6 +48,7 @@
       async onLoginSuccess({ code }: any) {
         const weComCallback = getWeComCallback(code);
         userStore.qrCodeLogin(await weComCallback);
+        setLongType('WE_COM');
         Message.success(t('login.form.login.success'));
         const { redirect, ...othersQuery } = router.currentRoute.value.query;
         const redirectHasPermission =

frontend/src/views/login/index.vue

@@ -8,7 +8,9 @@
   >
     <div class="login-page" :style="props.isPreview ? '' : 'min-width: 1200px;'">
       <banner />
-      <loginForm :is-preview="props.isPreview" />
+      <a-spin :loading="appStore.getLoginLoadingStatus" class="w-full">
+        <loginForm :is-preview="props.isPreview" />
+      </a-spin>
     </div>
   </a-scrollbar>
 </template>
@@ -17,6 +19,10 @@
   import banner from './components/banner.vue';
   import loginForm from './components/login-form.vue';
 
+  import { useAppStore } from '@/store';
+
+  const appStore = useAppStore();
+
   const props = defineProps<{
     isPreview?: boolean;
   }>();