修改系统异常提醒

src/layouts/index.less

@@ -168,13 +168,8 @@ input:-webkit-autofill:active {
 
 .ant-layout-content.ant-pro-basicLayout-content.ant-pro-basicLayout-has-header {
   margin-bottom: 0 !important;
-}
+  min-height: calc(100vh - 72px);
-
+  min-height: calc(100vh - var(--vh-offset, 0px) - 72px);
-@media (min-width: 768px) {
-  .ant-layout-content.ant-pro-basicLayout-content.ant-pro-basicLayout-has-header {
-    min-height: calc(100vh - 72px);
-    min-height: calc(100vh - var(--vh-offset, 0px) - 72px);
-  }
 }
 
 .Resizer {

src/layouts/index.tsx

@@ -15,11 +15,13 @@ import './index.less';
 import vhCheck from 'vh-check';
 import { version, changeLog } from '../version';
 import { useCtx, useTheme } from '@/utils/hooks';
+import { message } from 'antd';
 
 export default function (props: any) {
   const ctx = useCtx();
   const theme = useTheme();
   const [user, setUser] = useState<any>();
+  const [loading, setLoading] = useState<boolean>(true);
 
   const logout = () => {
     request.post(`${config.apiPrefix}logout`).then(() => {
@@ -28,30 +30,25 @@ export default function (props: any) {
     });
   };
 
-  const getUser = () => {
+  const getUser = (needLoading = true) => {
-    request
+    needLoading && setLoading(true);
-      .get(`${config.apiPrefix}user`)
+    request.get(`${config.apiPrefix}user`).then(({ code, data }) => {
-      .then((data) => {
+      if (code === 200 && data.username) {
-        if (data.data.username) {
+        setUser(data);
-          setUser(data.data);
+        localStorage.setItem('isLogin', 'true');
-          if (props.location.pathname === '/') {
+        if (props.location.pathname === '/') {
-            history.push('/crontab');
+          history.push('/crontab');
-          }
         }
-      })
+      } else {
-      .catch((e) => {
+        message.error(data);
-        if (e.response && e.response.status === 401) {
+      }
-          localStorage.removeItem(config.authKey);
+      needLoading && setLoading(false);
-          history.push('/login');
+    });
-        }
-      });
   };
 
-  useEffect(() => {
+  const reloadUser = () => {
-    if (!user) {
+    getUser(false);
-      getUser();
+  };
-    }
-  }, [props.location.pathname]);
 
   useEffect(() => {
     const isAuth = localStorage.getItem(config.authKey);
@@ -64,6 +61,12 @@ export default function (props: any) {
     document.title = '控制面板';
   }, []);
 
+  useEffect(() => {
+    if (!user) {
+      getUser();
+    }
+  }, [props.location.pathname]);
+
   useEffect(() => {
     const _theme = localStorage.getItem('qinglong_dark_theme') || 'auto';
     setFetchMethod(window.fetch);
@@ -89,6 +92,7 @@ export default function (props: any) {
   return (
     <ProLayout
       selectedKeys={[props.location.pathname]}
+      loading={loading}
       title={
         <>
           控制面板
@@ -136,7 +140,7 @@ export default function (props: any) {
           ...ctx,
           ...theme,
           user,
-          reloadUser: getUser,
+          reloadUser,
         });
       })}
     </ProLayout>

src/utils/http.ts

@@ -1,6 +1,7 @@
 import { extend } from 'umi-request';
 import { message } from 'antd';
 import config from './config';
+import { history } from 'umi';
 
 message.config({
   duration: 1.5,
@@ -12,10 +13,17 @@ const errorHandler = function (error: any) {
     const msg = error.data
       ? error.data.message || error.data
       : error.response.statusText;
-    if (error.response.status !== 401 && error.response.status !== 502) {
+    const responseStatus = error.response.status;
-      message.error(msg);
+    if (responseStatus === 502) {
+      message.error('服务异常，请手动执行ql check检查服务状态');
+    } else if (responseStatus === 401) {
+      if (history.location.pathname !== '/login') {
+        message.error('登录已过期，请重新登录');
+        localStorage.removeItem(config.authKey);
+        history.push('/login');
+      }
     } else {
-      console.log(error.response);
+      message.error(msg);
     }
   } else {
     console.log(error.message);