web_dist/src/router/index.ts

//@ts-nocheck
/**
 * @description 所有人可使用的参数配置列表
 * @params hideMenu: 是否隐藏当前路由结点不在导航中展示
 * @params alwaysShow: 只有一个子路由时是否总是展示菜单，默认false
 */
import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
import NProgress from "@/utils/system/nprogress";
import {changeTitle} from "@/utils/system/title";

// 动态路由相关引入数据
// 引入modules
import Dashboard from "./modules/dashboard";
import {getUserMenu, IntergrationMenu} from "@/api/settings/menu-settings";
import {createVNode, defineComponent, h, Ref} from "vue";
import {stringNotBlank} from "@/utils/blank-utils";
import {useUserStore} from "@/pinia/user-store";
import XEUtils from "xe-utils";

const router = createRouter({
  history: createWebHistory(),
  routes: [...Dashboard],
});

const vueFile = import.meta.glob("../views/**/*.{vue,tsx}");
vueFile.Layout = import.meta.glob("../layout/index.vue")["../layout/index.vue"];

let asyncFinished = false;
export const routerMenus: Ref<IntergrationMenu[]> = ref([]);

const firstLevelRouter = [];
const secondLevelRouter = [];
const appFullscreens = [];
export const secondLevelRouterKey = new Map<string, string[]>();

function emptyRouter(routers: IntergrationMenu[]) {
  routers.forEach(item => {
    const hasChildren = item.children !== null && item.children.length > 0;
    if (item.fullscreen) {
      appFullscreens.push(item);
    } else if (item.component === "Layout" && hasChildren) {
      item.children?.forEach(child => {
        child.path = item.path + "/" + child.path;
        firstLevelRouter.push(child);
      });
    } else if (hasChildren) {
      item.children!.forEach(child => {
        child.path = child.path.replace(item.path + "/", "");
      });
      secondLevelRouter.push(item);
    } else {
      firstLevelRouter.push(item);
    }

    if (item.children !== null && item.children.length > 0) {
      emptyRouter(item.children);
    }
  });
}

function convertToRouter(value: IntergrationMenu[]) {
  const routers: RouteRecordRaw[] = [];
  value.forEach(item => {
    const meta: { [key: string]: any } = {};
    for (let key in item) {
      if (key.startsWith("meta")) {
        const metaKey = capitalizeFirstLower(key.replace("meta", ""));
        meta[metaKey] = item[key];
      }
    }
    let path = item.path;
    if (item.pathParams?.length > 0) {
      const paths = item.path.split("/$");
      path = paths[0];
    }
    const data: RouteRecordRaw = {
      path: path + (item.pathParams === null ? "" : item.pathParams),
      name: item.name,
      redirect: item.redirect,
      meta: meta,
      componentName: item.component,
      component: createNameComponent(item),
    };
    if (item.children && item.children.length > 0) {
      data.children = convertToRouter(item.children);
    }
    routers.push(data);
  });
  return routers;
}

async function beforeAddRoutes() {
  await useUserStore().getUserInfo;
  routerMenus.value = await getUserMenu();
  emptyRouter(XEUtils.cloneDeep(routerMenus.value));

  secondLevelRouter.forEach(item => {
    const tmp = XEUtils.eachAndReturnList(item.children, i => {
      return i.name;
    });
    secondLevelRouterKey.set(item.name, tmp);
  });

  router.addRoute({
    name: "Home",
    path: "/",
    redirect: "/dashboard",
    component: () => import("@/layout/index.vue"),
    children: [
      ...convertToRouter(firstLevelRouter),
      ...convertToRouter(secondLevelRouter),
    ],
  });
  convertToRouter(appFullscreens).forEach(item => {
    router.addRoute(item);
  });
}

function createNameComponent(item) {
  return () => {
    return new Promise((resolve, reject) => {
      try {
        vueFile[`${item.component}`]().then(res => {
          const tmp = defineComponent({
            name: item.name,
            render() {
              let children = [createVNode(res.default)];
              const style = {
                height: "100%",
                width: "100%",
              };
              const props = {
                style,
              };
              if (item.mainCard) {
                props.class = "layout_card";
              }
              if (item.mainOverflowAuto) {
                children = [
                  h(
                    "div",
                    {
                      style: {
                        height: "100%",
                        width: "100%",
                        overflow: "auto",
                      },
                    },
                    [createVNode(res.default)]
                  ),
                ];
              }
              return h("div", props, children);
            },
          });
          resolve(tmp);
        });
      } catch (e) {
        reject("路由错误");
        router.push("/500");
      }
    });
  };
}

const capitalizeFirstLower = (word: string) => {
  return word.charAt(0).toLowerCase() + word.slice(1);
};

router.beforeEach(async (to, _from, next) => {
  NProgress.start();
  const hasToken = stringNotBlank(localStorage.token);

  function tmpNext(...arg) {
    to.meta.title && changeTitle(to.meta.title);
    if (!hasToken) {
      next("/login");
      return;
    }
    next(...arg);
  }

  if (to.name === "notFound" && hasToken) {
    if (!asyncFinished) {
      await beforeAddRoutes();
      tmpNext({ path: to.path, query: to.query, replace: true });
      asyncFinished = true;
    } else {
      tmpNext();
    }
  } else {
    if (!hasToken && !to.meta.needToken) {
      to.meta.title && changeTitle(to.meta.title);
      next();
    } else {
      tmpNext();
    }
  }
});

router.afterEach((to, _from) => {
  NProgress.done();
});

export default router;