王明 / Food-Labeling-Management-Platform

  import type { Router } from 'vue-router';
  
  import { nextTick } from 'vue';
  
  import { LOGIN_PATH } from '@vben/constants';
  import { preferences } from '@vben/preferences';
  import { useAccessStore, useTabbarStore, useUserStore } from '@vben/stores';
  import { startProgress, stopProgress } from '@vben/utils';
  
  import { accessRoutes, coreRouteNames } from '#/router/routes';
  import { useAuthStore } from '#/store';
  
  import { generateAccess } from './access';
  

  function findFirstAccessiblePath(routes: any[]): string {
    for (const route of routes) {
      if (route?.meta?.hideInMenu) {
        continue;
      }
      if (
        typeof route?.redirect === 'string' &&
        route.redirect &&
        route.redirect !== 'noRedirect'
      ) {
        return route.redirect;
      }
      if (Array.isArray(route?.children) && route.children.length > 0) {
        const childPath = findFirstAccessiblePath(route.children);
        if (childPath) {
          return childPath;
        }
      }
      if (typeof route?.path === 'string' && route.path) {
        return route.path;
      }
    }
    return '';
  }
  

  /**
   * 通用守卫配置
   * @param router
   */
  function setupCommonGuard(router: Router) {
    // 记录已经加载的页面
    const loadedPaths = new Set<string>();
  
    router.beforeEach((to) => {
      to.meta.loaded = loadedPaths.has(to.path);
  
      // 页面加载进度条
      if (!to.meta.loaded && preferences.transition.progress) {
        startProgress();
      }
      return true;
    });
  
    router.afterEach((to) => {
      // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
  
      loadedPaths.add(to.path);
  
      // 关闭页面加载进度条
      if (preferences.transition.progress) {
        stopProgress();
      }
    });
  }
  
  /**
   * 权限访问守卫配置
   * @param router
   */
  function setupAccessGuard(router: Router) {
    router.beforeEach(async (to, from) => {
      const accessStore = useAccessStore();
      const userStore = useUserStore();
      const authStore = useAuthStore();
  
      // 基本路由，这些路由不需要进入权限拦截
      if (coreRouteNames.includes(to.name as string)) {
        if (to.path === LOGIN_PATH && accessStore.accessToken) {
          return decodeURIComponent(
            (to.query?.redirect as string) ||
              userStore.userInfo?.homePath ||
              preferences.app.defaultHomePath,
          );
        }
        return true;
      }
  
      // accessToken 检查
      if (!accessStore.accessToken) {
        // 明确声明忽略权限访问权限，则可以访问
        if (to.meta.ignoreAccess) {
          return true;
        }
  
        // 没有访问权限，跳转登录页面
        if (to.fullPath !== LOGIN_PATH) {
          return {
            path: LOGIN_PATH,
            // 如不需要，直接删除 query
            query:
              to.fullPath === preferences.app.defaultHomePath
                ? {}
                : { redirect: encodeURIComponent(to.fullPath) },
            // 携带当前跳转的页面，登录后重新跳转该页面
            replace: true,
          };
        }
        return to;
      }
  
      // 是否已经生成过动态路由
      if (accessStore.isAccessChecked) {
        return true;
      }
  
      // 生成路由表
      // 当前登录用户拥有的角色标识列表
      const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
      const userRoles = userInfo.roles ?? [];
  
      // 生成菜单和路由
      const { accessibleMenus, accessibleRoutes } = await generateAccess({
        roles: userRoles,
        router,
        // 则会在菜单中显示，但是访问会被重定向到403
        routes: accessRoutes,
      });
  
      // 保存菜单信息和路由信息
      accessStore.setAccessMenus(accessibleMenus);
      accessStore.setAccessRoutes(accessibleRoutes);
      accessStore.setIsAccessChecked(true);

      let redirectPath = (from.query.redirect ??

        (to.path === preferences.app.defaultHomePath
          ? userInfo.homePath || preferences.app.defaultHomePath
          : to.fullPath)) as string;

      const decodedRedirectPath = decodeURIComponent(redirectPath);
      const firstAccessiblePath = findFirstAccessiblePath(accessibleMenus as any[]);
      if (firstAccessiblePath && userInfo.homePath !== firstAccessiblePath) {
        userStore.setUserInfo({
          ...userInfo,
          homePath: firstAccessiblePath,
        });
      }
      if (
        decodedRedirectPath === preferences.app.defaultHomePath &&
        firstAccessiblePath &&
        firstAccessiblePath !== preferences.app.defaultHomePath
      ) {
        redirectPath = firstAccessiblePath;
      }

  
      return {
        ...router.resolve(decodeURIComponent(redirectPath)),
        replace: true,
      };
    });
  }
  
  /**
   * 任意路由切换前先卸载 RouterView，避免报表/Vxe/ECharts 卸载时报 parentNode 为 null，
   * 导致 router.push 后 URL 已变但主区域仍显示上一页。
   */
  function setupRouteViewRemountGuard(router: Router) {

    function restoreRouteView() {
      const tabbarStore = useTabbarStore();
      if (tabbarStore.renderRouteView === false) {
        tabbarStore.renderRouteView = true;
      }
    }
  

    router.beforeEach(async (to, from) => {
      if (from.matched.length > 0 && to.path !== from.path) {
        const tabbarStore = useTabbarStore();
        tabbarStore.renderRouteView = false;

        window.setTimeout(restoreRouteView, 1200);

        await nextTick();
        await new Promise<void>((resolve) => {
          requestAnimationFrame(() => resolve());
        });
        await nextTick();
      }
      return true;
    });
  

    router.onError(() => {
      restoreRouteView();
    });
  

    router.afterEach(async (to) => {
      const tabbarStore = useTabbarStore();
      if (tabbarStore.renderRouteView === false) {
        await nextTick();
        await new Promise<void>((resolve) => {
          requestAnimationFrame(() => resolve());
        });
        await nextTick();
        tabbarStore.renderRouteView = true;
      }
      // 导航完成后再次等待一帧，避免报表 RangePicker 卸载异常时新页未挂上
      if (to.matched.length > 0) {
        await nextTick();
      }
    });
  }
  
  /**
   * 项目守卫配置
   * @param router
   */
  function createRouterGuard(router: Router) {
    /** 通用 */
    setupCommonGuard(router);
    /** 权限访问 */
    setupAccessGuard(router);
    /** 路由切换前强制卸载主内容区 */
    setupRouteViewRemountGuard(router);
  }
  
  export { createRouterGuard };