4pc/src/router.ts

import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
import { UserStatus, logintAuth, userStatus, isSuper } from "./store/user";
import { watch, watchEffect } from "vue";

export const COORD_NAME = "map-coord";
export const POYS_NAME = "map-poy";
export const QUERY_COORD_NAME = "query-map-coord";
export const QUERY_POYS_NAME = "query-map-poy";

const history = createWebHashHistory();

const routes: RouteRecordRaw[] = [
  {
    path: "/no-persession",
    name: "no-persession",
    meta: { title: "无权限" },
    component: () => import("@/view/no-persession.vue"),
  },
  {
    path: "/down-vision",
    name: "down-vision",
    meta: { title: "" },
    component: () => import("@/view/down-vision.vue"),
  },
  {
    path: "/login",
    name: "login",
    meta: { title: "登录" },
    component: () => import("@/view/login.vue"),
  },
  {
    path: "/tree2",
    name: "query-tree-2",
    meta: { title: "登录" },
    component: () => import("@/view/step-tree-v2/example/example.vue"),
  },
  {
    path: "/tree",
    name: "query-tree",
    meta: { title: "登录" },
    component: () => import("@/view/step-tree/example/example.vue"),
  },
  {
    path: "/",
    name: "main-layout",
    component: () => import("@/view/layout/nav.vue"),
    children: [
      {
        path: "relics",
        name: "relics",
        meta: { title: "文物普查" },
        component: () => import("@/view/relics.vue"),
      },
      {
        path: "relics/:relicsId",
        children: [
          // {
          //   path: "",
          //   name: "map",
          //   meta: { title: "文物", navClass: "map" },
          //   component: () => import("@/view/map/map-board.vue"),
          // },
          {
            path: "map",
            name: "map",
            meta: { title: "文物", navClass: "map" },
            component: () => import("@/view/map/layout.vue"),
            children: [
              {
                path: "coord",
                name: COORD_NAME,
                meta: { title: "文物", navClass: "map" },
                component: () => import("@/view/map/coord.vue"),
              },
              {
                path: "polygons",
                name: POYS_NAME,
                meta: { title: "文物", navClass: "map" },
                component: () => import("@/view/map/polygons.vue"),
              },
            ],
          },
          {
            path: "pano/:pid",
            name: "pano",
            meta: { title: "点位", navClass: "pano" },
            component: () => import("@/view/pano/pano.vue"),
          },
        ],
      },
      {
        path: "scene",
        name: "scene",
        meta: { title: "场景管理" },
        component: () => import("@/view/scene.vue"),
      },
      {
        path: "device",
        name: "device",
        meta: { title: "设备管理" },
        component: () => import("@/view/device.vue"),
      },
      {
        path: "organization",
        name: "organization",
        meta: { title: "单位管理" },
        component: () => import("@/view/organization.vue"),
      },
      {
        path: "users",
        name: "users",
        meta: { title: "用户管理" },
        component: () => import("@/view/users.vue"),
      },
    ],
  },
  {
    path: "/query",
    name: "query-main-layout",
    component: () => import("@/view/layout/nav.vue"),
    children: [
      {
        path: "relics/:relicsId",
        children: [
          {
            path: "",
            name: "query-map",
            meta: { title: "文物", navClass: "map" },
            component: () => import("@/view/map/layout.vue"),
            children: [
              {
                path: "query-coord",
                name: QUERY_COORD_NAME,
                meta: { title: "文物", navClass: "map" },
                component: () => import("@/view/map/coord.vue"),
              },
              {
                path: "query-polygons",
                name: QUERY_POYS_NAME,
                meta: { title: "文物", navClass: "map" },
                component: () => import("@/view/map/polygons.vue"),
              },
            ],
          },
          {
            path: "pano/:pid",
            name: "query-pano",
            meta: { title: "点位", navClass: "pano" },
            component: () => import("@/view/pano/pano.vue"),
          },
        ],
      },
    ],
  },
  { path: '/:pathMatch(.*)*', component: import("@/view/layout/nav.vue") },

];

export const findRoute = (
  routeName: string,
  fullPath = false,
  routeAll = routes
): RouteRecordRaw | null => {
  for (const route of routeAll) {
    if (route.name === routeName) {
      return route;
    } else if (route.children) {
      const childRoute = findRoute(routeName, fullPath, route.children);
      if (childRoute) {
        return fullPath ? { ...route, children: [childRoute] } : childRoute;
      }
    }
  }
  return null;
};

export const router = createRouter({ history, routes });
export const setDocTitle = (title: string) => {
  document.title = title + "-不可移动文物管理平台";
};

watchEffect(() => {
  const routeName = router.currentRoute.value.name?.toString();
  if (routeName === "login" && userStatus.value === UserStatus.LOGINED) {
    router.replace({ name: "scene" });
  } else if (
    routeName &&
    routeName !== "login" &&
    !routeName.includes("query") &&
    userStatus.value === UserStatus.NOT_LOGIN
  ) {
    router.replace({ name: "login" });
  }
});

// 非登录页面校验是否等里
watch(
  () => [router.currentRoute.value.name?.toString(), userStatus.value] as const,
  ([routeName, userStatus]) => {
    if (
      routeName &&
      !routeName.includes("query") &&
      userStatus === UserStatus.UNKNOWN
    ) {
      logintAuth();
    }
  },
  { immediate: true }
);

router.beforeEach((to, _, next) => {
  if (!to.name || to.name === "main-layout") {
    if (userStatus.value !== UserStatus.NOT_LOGIN) {
      router.replace({ name: "scene" });
    } else {
      router.replace({ name: "login" });
    }
    return;
  }
  // organization
  if (to.name === "organization") {
    console.log('isSuper-organization', isSuper.value)
    if (!isSuper.value) {
      router.replace({ name: "scene" });
      return
    }
  }

  if (to.name === "map") {
    router.replace({ name: COORD_NAME, params: to.params });
  } else if (to.name === "query-map") {
    router.replace({ name: QUERY_COORD_NAME, params: to.params });
  }

  if (to.meta?.title) {
    setDocTitle(to.meta.title as string);
  }
  next();
});