fix(login): login page modal style fixed: #662 (#666)

* fix: catch axios error data on request

* fix(login): login page modal style fixed: #662

Author: mynetfan

src/locales/lang/en/sys.ts

@@ -5,6 +5,7 @@ export default {
     errorMessage: 'The operation failed, the system is abnormal!',
     timeoutMessage: 'Login timed out, please log in again!',
     apiTimeoutMessage: 'The interface request timed out, please refresh the page and try again!',
+    apiRequestFailed: 'The interface request failed, please try again later!',
     networkException: 'network anomaly',
     networkExceptionMsg:
       'Please check if your network connection is normal! The network is abnormal',

src/locales/lang/zh_CN/sys.ts

@@ -5,6 +5,7 @@ export default {
     errorMessage: '操作失败,系统异常!',
     timeoutMessage: '登录超时,请重新登录!',
     apiTimeoutMessage: '接口请求超时,请刷新页面重试!',
+    apiRequestFailed: '请求出错，请稍候重试',
     networkException: '网络异常',
     networkExceptionMsg: '请检查您的网络连接是否正常!',
 

src/store/modules/user.ts

@@ -100,7 +100,7 @@ export const useUserStore = defineStore({
         !sessionTimeout && goHome && (await router.replace(PageEnum.BASE_HOME));
         return userInfo;
       } catch (error) {
-        return null;
+        return Promise.reject(error);
       }
     },
     async getUserInfoAction({ userId }: GetUserInfoByUserIdParams) {

src/utils/http/axios/Axios.ts

@@ -8,7 +8,7 @@ import { AxiosCanceler } from './axiosCancel';
 import { isFunction } from '/@/utils/is';
 import { cloneDeep } from 'lodash-es';
 
-import { errorResult } from './const';
+//import { errorResult } from './const';
 import { ContentTypeEnum } from '/@/enums/httpEnum';
 import { RequestEnum } from '../../../enums/httpEnum';
 
@@ -208,11 +208,15 @@ export class VAxios {
         .request<any, AxiosResponse<Result>>(conf)
         .then((res: AxiosResponse<Result>) => {
           if (transformRequestHook && isFunction(transformRequestHook)) {
-            const ret = transformRequestHook(res, opt);
-            ret !== errorResult ? resolve(ret) : reject(new Error('request error!'));
+            try {
+              const ret = transformRequestHook(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('request error!'));
+            }
             return;
           }
-          resolve((res as unknown) as Promise<T>);
+          resolve(res as unknown as Promise<T>);
         })
         .catch((e: Error) => {
           if (requestCatchHook && isFunction(requestCatchHook)) {

src/utils/http/axios/index.ts

@@ -18,7 +18,7 @@ import { getToken } from '/@/utils/auth';
 import { setObjToUrlParams, deepMerge } from '/@/utils';
 import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
 
-import { errorResult } from './const';
+//import { errorResult } from './const';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { createNow, formatRequestDate } from './helper';
 
@@ -31,7 +31,7 @@ const { createMessage, createErrorModal } = useMessage();
  */
 const transform: AxiosTransform = {
   /**
-   * @description: 处理请求数据
+   * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
    */
   transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
     const { t } = useI18n();
@@ -50,7 +50,8 @@ const transform: AxiosTransform = {
     const { data } = res;
     if (!data) {
       // return '[HTTP] Request has no return value';
-      return errorResult;
+      throw new Error(t('sys.api.apiRequestFailed'));
+      //return errorResult;
     }
     //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
     const { code, result, message } = data;
@@ -66,8 +67,8 @@ const transform: AxiosTransform = {
           createMessage.error(message);
         }
       }
-      Promise.reject(new Error(message));
-      return errorResult;
+      throw new Error(message);
+      //return errorResult;
     }
 
     // 接口请求成功，直接返回结果
@@ -78,13 +79,13 @@ const transform: AxiosTransform = {
     if (code === ResultEnum.ERROR) {
       if (message) {
         createMessage.error(data.message);
-        Promise.reject(new Error(message));
+        throw new Error(message);
       } else {
         const msg = t('sys.api.errorMessage');
         createMessage.error(msg);
-        Promise.reject(new Error(msg));
+        throw new Error(msg);
       }
-      return errorResult;
+      //return errorResult;
     }
     // 登录超时
     if (code === ResultEnum.TIMEOUT) {
@@ -93,10 +94,11 @@ const transform: AxiosTransform = {
         title: t('sys.api.operationFailed'),
         content: timeoutMsg,
       });
-      Promise.reject(new Error(timeoutMsg));
-      return errorResult;
+      throw new Error(timeoutMsg);
+      //return errorResult;
     }
-    return errorResult;
+    throw new Error(t('sys.api.apiRequestFailed'));
+    //return errorResult;
   },
 
   // 请求之前处理config

src/views/sys/login/LoginForm.vue

@@ -118,7 +118,7 @@
     },
     setup() {
       const { t } = useI18n();
-      const { notification } = useMessage();
+      const { notification, createErrorModal } = useMessage();
       const { prefixCls } = useDesign('login');
       const userStore = useUserStore();
 
@@ -149,6 +149,7 @@
             toRaw({
               password: data.password,
               username: data.account,
+              mode: 'none', //不要默认的错误提示
             })
           );
           if (userInfo) {
@@ -158,6 +159,12 @@
               duration: 3,
             });
           }
+        } catch (error) {
+          createErrorModal({
+            title: t('sys.api.errorTip'),
+            content: error.message || t('sys.api.networkExceptionMsg'),
+            getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
+          });
         } finally {
           loading.value = false;
         }