---初始化后台管理web页面项目

src/router/guard/index.ts

@@ -0,0 +1,154 @@
+import type { Router, RouteLocationNormalized } from 'vue-router';
+import { useAppStoreWithOut } from '/@/store/modules/app';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { AxiosCanceler } from '/@/utils/http/axios/axiosCancel';
+import { Modal, notification } from 'ant-design-vue';
+import { warn } from '/@/utils/log';
+import { unref } from 'vue';
+import { setRouteChange } from '/@/logics/mitt/routeChange';
+import { createPermissionGuard } from './permissionGuard';
+import { createStateGuard } from './stateGuard';
+import nProgress from 'nprogress';
+import projectSetting from '/@/settings/projectSetting';
+import { createParamMenuGuard } from './paramMenuGuard';
+
+// Don't change the order of creation
+export function setupRouterGuard(router: Router) {
+  createPageGuard(router);
+  createPageLoadingGuard(router);
+  createHttpGuard(router);
+  createScrollGuard(router);
+  createMessageGuard(router);
+  createProgressGuard(router);
+  createPermissionGuard(router);
+  createParamMenuGuard(router); // must after createPermissionGuard (menu has been built.)
+  createStateGuard(router);
+}
+
+/**
+ * Hooks for handling page state
+ */
+function createPageGuard(router: Router) {
+  const loadedPageMap = new Map<string, boolean>();
+
+  router.beforeEach(async (to, from) => {
+    // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
+    to.meta.loaded = !!loadedPageMap.get(to.path);
+    // Notify routing changes
+    setRouteChange(to);
+    const toPath = to.path;
+    if (/createFlow|approveFlow|createForm|viewForm|updateForm/.test(toPath)) {
+      // 记录从哪里来的 关闭页面的时候好跳回去
+      if(!window.fcd.routeBackMapping[to.path]){
+        // tab切换也会触发路由守卫 所以只记录第一次的状态
+        window.fcd.routeBackMapping[to.path] = from.path;
+      }
+    }
+    return true;
+  });
+
+  router.afterEach((to) => {
+    loadedPageMap.set(to.path, true);
+  });
+}
+
+// Used to handle page loading status
+function createPageLoadingGuard(router: Router) {
+  const userStore = useUserStoreWithOut();
+  const appStore = useAppStoreWithOut();
+  const { getOpenPageLoading } = useTransitionSetting();
+  router.beforeEach(async (to) => {
+    if (!userStore.getToken) {
+      return true;
+    }
+    if (to.meta.loaded) {
+      return true;
+    }
+
+    if (unref(getOpenPageLoading)) {
+      appStore.setPageLoadingAction(true);
+      return true;
+    }
+
+    return true;
+  });
+  router.afterEach(async () => {
+    if (unref(getOpenPageLoading)) {
+      // TODO Looking for a better way
+      // The timer simulates the loading time to prevent flashing too fast,
+      setTimeout(() => {
+        appStore.setPageLoading(false);
+      }, 220);
+    }
+    return true;
+  });
+}
+
+/**
+ * The interface used to close the current page to complete the request when the route is switched
+ * @param router
+ */
+function createHttpGuard(router: Router) {
+  const { removeAllHttpPending } = projectSetting;
+  let axiosCanceler: Nullable<AxiosCanceler>;
+  if (removeAllHttpPending) {
+    axiosCanceler = new AxiosCanceler();
+  }
+  router.beforeEach(async () => {
+    // Switching the route will delete the previous request
+    axiosCanceler?.removeAllPending();
+    return true;
+  });
+}
+
+// Routing switch back to the top
+function createScrollGuard(router: Router) {
+  const isHash = (href: string) => {
+    return /^#/.test(href);
+  };
+
+  const body = document.body;
+
+  router.afterEach(async (to) => {
+    // scroll top
+    isHash((to as RouteLocationNormalized & { href: string })?.href) && body.scrollTo(0, 0);
+    return true;
+  });
+}
+
+/**
+ * Used to close the message instance when the route is switched
+ * @param router
+ */
+export function createMessageGuard(router: Router) {
+  const { closeMessageOnSwitch } = projectSetting;
+
+  router.beforeEach(async () => {
+    try {
+      if (closeMessageOnSwitch) {
+        Modal.destroyAll();
+        notification.destroy();
+      }
+    } catch (error) {
+      warn('message guard error:' + error);
+    }
+    return true;
+  });
+}
+
+export function createProgressGuard(router: Router) {
+  const { getOpenNProgress } = useTransitionSetting();
+  router.beforeEach(async (to) => {
+    if (to.meta.loaded) {
+      return true;
+    }
+    unref(getOpenNProgress) && nProgress.start();
+    return true;
+  });
+
+  router.afterEach(async () => {
+    unref(getOpenNProgress) && nProgress.done();
+    return true;
+  });
+}

src/router/guard/paramMenuGuard.ts

@@ -0,0 +1,66 @@
+import type { Router } from 'vue-router';
+import { configureDynamicParamsMenu } from '../helper/menuHelper';
+import { Menu } from '../types';
+import { PermissionModeEnum } from '/@/enums/appEnum';
+import { useAppStoreWithOut } from '/@/store/modules/app';
+
+import { usePermissionStoreWithOut } from '/@/store/modules/permission';
+
+export function createParamMenuGuard(router: Router) {
+  const permissionStore = usePermissionStoreWithOut();
+  router.beforeEach(async (to, _, next) => {
+    to.fullPath = (to.fullPath as string) + convertQuery(to);
+
+    // filter no name route
+    if (!to.name) {
+      next();
+      return;
+    }
+
+    // menu has been built.
+    if (!permissionStore.getIsDynamicAddedRoute) {
+      next();
+      return;
+    }
+
+    let menus: Menu[] = [];
+    if (isBackMode()) {
+      menus = permissionStore.getBackMenuList;
+    } else if (isRouteMappingMode()) {
+      menus = permissionStore.getFrontMenuList;
+    }
+    menus.forEach((item) => configureDynamicParamsMenu(item, to.params));
+
+    next();
+  });
+}
+
+const convertQuery = (to) => {
+  try {
+    if (to.meta.remark && to.meta.remark.indexOf('?') > -1 && to.fullPath.indexOf('?') <= -1) {
+      const str = to.meta.remark.substring(1);
+      const paramArray = str.split('&');
+      for (const param of paramArray) {
+        const p = param.split('=');
+        to.query[p[0]] = p[1];
+      }
+      return to.meta.remark;
+    }
+    return '';
+  } catch {
+    return '';
+  }
+};
+
+const getPermissionMode = () => {
+  const appStore = useAppStoreWithOut();
+  return appStore.getProjectConfig.permissionMode;
+};
+
+const isBackMode = () => {
+  return getPermissionMode() === PermissionModeEnum.BACK;
+};
+
+const isRouteMappingMode = () => {
+  return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING;
+};

src/router/guard/permissionGuard.ts

@@ -0,0 +1,123 @@
+import type { Router, RouteRecordRaw } from 'vue-router';
+
+import { usePermissionStoreWithOut } from '/@/store/modules/permission';
+
+import { PageEnum } from '/@/enums/pageEnum';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+
+import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
+
+import { RootRoute } from '/@/router/routes';
+
+const LOGIN_PATH = PageEnum.BASE_LOGIN;
+
+const ROOT_PATH = RootRoute.path;
+
+const whitePathList: PageEnum[] = [LOGIN_PATH];
+
+export function createPermissionGuard(router: Router) {
+  const userStore = useUserStoreWithOut();
+  const permissionStore = usePermissionStoreWithOut();
+  router.beforeEach(async (to, from, next) => {
+    let isOnlyShowContent=to.query?.isOnlyShowContent;
+    if(isOnlyShowContent=='Y'){
+        window.isOnlyShowContent='Y';
+    }else{
+        window.isOnlyShowContent='N';
+    }
+    if (
+      from.path === ROOT_PATH &&
+      to.path === PageEnum.BASE_HOME &&
+      userStore.getUserInfo.homePath &&
+      userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
+    ) {
+      next(userStore.getUserInfo.homePath);
+      return;
+    }
+
+    const token = userStore.getToken;
+
+    // Whitelist can be directly entered
+    if (whitePathList.includes(to.path as PageEnum)) {
+      if (to.path === LOGIN_PATH && token && !to.query?.ltpasToken) {
+        const isSessionTimeout = userStore.getSessionTimeout;
+        try {
+          await userStore.afterLoginAction();
+          if (!isSessionTimeout) {
+            next((to.query?.redirect as string) || '/');
+            return;
+          }
+        } catch {}
+      }
+      next();
+      return;
+    }
+
+    // token does not exist
+    if (!token) {
+      // You can access without permission. You need to set the routing meta.ignoreAuth to true
+      if (to.meta.ignoreAuth) {
+        next();
+        return;
+      }
+
+      // redirect login page
+      const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
+        path: LOGIN_PATH,
+        replace: true,
+      };
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path,
+        };
+      }
+      next(redirectData);
+      return;
+    }
+
+    // Jump to the 404 page after processing the login
+    if (
+      from.path === LOGIN_PATH &&
+      to.name === PAGE_NOT_FOUND_ROUTE.name &&
+      to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
+    ) {
+      next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+      return;
+    }
+
+    // get userinfo while last fetch time is empty
+    if (userStore.getLastUpdateTime === 0) {
+      try {
+        await userStore.getUserInfoAction();
+      } catch (err) {
+        next();
+        return;
+      }
+    }
+
+    if (permissionStore.getIsDynamicAddedRoute) {
+      next();
+      return;
+    }
+
+    const routes = await permissionStore.buildRoutesAction();
+
+    routes.forEach((route) => {
+      router.addRoute(route as unknown as RouteRecordRaw);
+    });
+
+    router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+    permissionStore.setDynamicAddedRoute(true);
+
+    if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
+      // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
+      next({ path: to.fullPath, replace: true, query: to.query });
+    } else {
+      const redirectPath = (from.query.redirect || to.path) as string;
+      const redirect = decodeURIComponent(redirectPath);
+      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+      next(nextData);
+    }
+  });
+}

src/router/guard/stateGuard.ts

@@ -0,0 +1,24 @@
+import type { Router } from 'vue-router';
+import { useAppStore } from '/@/store/modules/app';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useUserStore } from '/@/store/modules/user';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { PageEnum } from '/@/enums/pageEnum';
+import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
+
+export function createStateGuard(router: Router) {
+  router.afterEach((to) => {
+    // Just enter the login page and clear the authentication information
+    if (to.path === PageEnum.BASE_LOGIN) {
+      const tabStore = useMultipleTabStore();
+      const userStore = useUserStore();
+      const appStore = useAppStore();
+      const permissionStore = usePermissionStore();
+      appStore.resetAllState();
+      permissionStore.resetState();
+      tabStore.resetState();
+      userStore.resetState();
+      removeTabChangeListener();
+    }
+  });
+}