fix(babel.config.js): use polyfill of Array.prototype.at

Author: buqiyuan

babel.config.js

@@ -5,7 +5,7 @@ module.exports = {
       '@babel/preset-env',
       {
         useBuiltIns: 'entry',
-        corejs: 3,
+        corejs: 3.23,
       },
     ],
   ],

package.json

@@ -76,7 +76,7 @@
     "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-prettier": "^4.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.1.1",
     "husky": "^8.0.1",
     "less": "^4.1.3",

src/hooks/index.ts

@@ -1,4 +1,8 @@
 // import { useFormModal } from './useFormModal'
-import { useModal } from './useModal';
-
-export { useModal };
+export { useModal } from './useModal';
+export { useBattery } from './useBattery';
+export { useEventbus } from './useEventbus';
+export { useI18n } from './useI18n';
+export { useOnline } from './useOnline';
+export { useTime } from './useTime';
+export { useSortable } from './useSortable';

src/router/generator-router.tsx

@@ -124,16 +124,13 @@ export const generatorDynamicRouter = (asyncMenus: API.Menu[]) => {
     router.addRoute(layout);
     console.log('所有路由', router.getRoutes());
 
-    return {
+    return Promise.resolve({
       menus,
       routes: layout.children,
-    };
+    });
   } catch (error) {
     console.error('生成路由时出错', error);
-    return {
-      menus: [],
-      routes: [],
-    };
+    return Promise.reject(`生成路由时出错: ${error}`);
   }
 };
 

src/router/router-guards.ts

@@ -6,6 +6,7 @@ import { useUserStore } from '@/store/modules/user';
 import { useKeepAliveStore } from '@/store/modules/keepAlive';
 import { ACCESS_TOKEN_KEY } from '@/enums/cacheEnum';
 import { Storage } from '@/utils/Storage';
+import { to as _to } from '@/utils/awaitTo';
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
@@ -23,10 +24,13 @@ export function createRouterGuards(router: Router, whiteNameList: WhiteNameList)
         NProgress.done();
       } else {
         const hasRoute = router.hasRoute(to.name!);
-        // 如果不需要每次切换路由获取最新的动态路由，可把下面注释放开
         if (userStore.menus.length === 0) {
           // 从后台获取菜单
-          await userStore.afterLogin();
+          const [err] = await _to(userStore.afterLogin());
+          if (err) {
+            userStore.resetToken();
+            return next({ name: LOGIN_NAME });
+          }
           if (!hasRoute) {
             // 请求带有 redirect 重定向时，登录自动重定向到该地址
             const redirect = decodeURIComponent((from.query.redirect || '') as string);

src/store/modules/user.ts

@@ -78,7 +78,7 @@ export const useUserStore = defineStore({
         this.avatar = userInfo.headImg;
         this.userInfo = userInfo;
         // 生成路由
-        const generatorResult = generatorDynamicRouter(menus);
+        const generatorResult = await generatorDynamicRouter(menus);
         this.menus = generatorResult.menus.filter((item) => !item.meta?.hideInMenu);
         !wsStore.client && wsStore.initSocket();
 

src/utils/awaitTo.ts

@@ -0,0 +1,24 @@
+// reference https://github.com/scopsy/await-to-js
+
+/**
+ * @param { Promise } promise
+ * @param { Object= } errorExt - Additional Information you can pass to the err object
+ * @return { Promise }
+ */
+export function to<T, U = Error>(
+  promise: Promise<T>,
+  errorExt?: object,
+): Promise<[U, undefined] | [null, T]> {
+  return promise
+    .then<[null, T]>((data: T) => [null, data])
+    .catch<[U, undefined]>((err: U) => {
+      if (errorExt) {
+        const parsedError = Object.assign({}, err, errorExt);
+        return [parsedError, undefined];
+      }
+
+      return [err, undefined];
+    });
+}
+
+export default to;

src/views/login/index.vue

@@ -55,6 +55,7 @@
   import { message, Modal } from 'ant-design-vue';
   import { useUserStore } from '@/store/modules/user';
   import { getImageCaptcha } from '@/api/login';
+  import { to } from '@/utils/awaitTo';
 
   const state = reactive({
     loading: false,
@@ -91,20 +92,20 @@
     state.loading = true;
     console.log(state.formInline);
     // params.password = md5(password)
-    try {
-      await userStore.login(state.formInline).finally(() => {
-        state.loading = false;
-        message.destroy();
-      });
-      message.success('登录成功！');
-      setTimeout(() => router.replace((route.query.redirect as string) ?? '/'));
-    } catch (error: any) {
+
+    const [err] = await to(userStore.login(state.formInline));
+    if (err) {
       Modal.error({
         title: () => '提示',
-        content: () => error.message,
+        content: () => err.message,
       });
       setCaptcha();
+    } else {
+      message.success('登录成功！');
+      setTimeout(() => router.replace((route.query.redirect as string) ?? '/'));
     }
+    state.loading = false;
+    message.destroy();
   };
 </script>
 

yarn.lock

@@ -4210,10 +4210,10 @@ eslint-plugin-import@2.26.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
-eslint-plugin-prettier@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.1.0.tgz#1cd4b3fadf3b3cdb30b1874b55e7f93f85eb43ad"
-  integrity sha512-A3AXIEfTnq3D5qDFjWJdQ9c4BLhw/TqhSR+6+SVaoPJBAWciFEuJiNQh275OnjRrAi7yssZzuWBRw66VG2g6UA==
+eslint-plugin-prettier@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
+  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
   dependencies:
     prettier-linter-helpers "^1.0.0"