ant-vue-admin/src/store/modules/permission.ts

import type { AppRouteRecordRaw, Menu } from '/@/router/types';

import { defineStore } from 'pinia';
import { store } from '/@/store';
import { useI18n } from '/@/hooks/web/useI18n';
import { useUserStore } from './user';
import { useAppStoreWidthOut } from './app';
import { toRaw } from 'vue';
import { transformObjToRoute, flatMultiLevelRoutes } from '/@/router/helper/routeHelper';
import { transformRouteToMenu } from '/@/router/helper/menuHelper';

import projectSetting from '/@/settings/projectSetting';

import { PermissionModeEnum } from '/@/enums/appEnum';

import { asyncRoutes } from '/@/router/routes';
import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';

import { filter } from '/@/utils/helper/treeHelper';

import { getMenuList } from '/@/api/sys/menu';
// import { getPermCode } from '/@/api/sys/user';

import { useMessage } from '/@/hooks/web/useMessage';

interface PermissionState {
  // Permission code list
  permCodeList: string[];
  // Whether the route has been dynamically added
  isDynamicAddedRoute: boolean;
  // To trigger a menu update
  lastBuildMenuTime: number;
  // Backstage menu list
  backMenuList: Menu[];
}
export const usePermissionStore = defineStore({
  id: 'app-permission',
  state: (): PermissionState => ({
    permCodeList: [],
    // Whether the route has been dynamically added
    isDynamicAddedRoute: false,
    // To trigger a menu update
    lastBuildMenuTime: 0,
    // Backstage menu list
    backMenuList: [],
  }),
  getters: {
    // getPermCodeList() {
    //   return this.permCodeList;
    // },
    getBackMenuList() {
      return this.backMenuList;
    },
    getLastBuildMenuTime() {
      return this.lastBuildMenuTime;
    },
    getIsDynamicAddedRoute() {
      return this.isDynamicAddedRoute;
    },
  },
  actions: {
    setPermCodeList(codeList: string[]) {
      this.permCodeList = codeList;
    },

    setBackMenuList(list: Menu[]) {
      this.backMenuList = list;
      list?.length > 0 && this.setLastBuildMenuTime();
    },

    setLastBuildMenuTime() {
      this.lastBuildMenuTime = new Date().getTime();
    },

    setDynamicAddedRoute(added: boolean) {
      this.isDynamicAddedRoute = added;
    },
    resetState(): void {
      this.isDynamicAddedRoute = false;
      this.permCodeList = [];
      this.backMenuList = [];
      this.lastBuildMenuTime = 0;
    },
    // async changePermissionCode() {
    //   const codeList = await getPermCode();
    //   this.setPermCodeList(codeList);
    // },
    async buildRoutesAction(): Promise<AppRouteRecordRaw[]> {
      const { t } = useI18n();
      const userStore = useUserStore();
      const appStore = useAppStoreWidthOut();

      let routes: AppRouteRecordRaw[] = [];
      const roleList = toRaw(userStore.getRoleList) || [];
      // 获取项目配置(src/settings/projectSetting.ts)的权限模式 -- 后端：BACK  前端：ROLE
      const { permissionMode = projectSetting.permissionMode } = appStore.getProjectConfig;
      // role permissions
      if (permissionMode === PermissionModeEnum.ROLE) {
        const routeFilter = (route: AppRouteRecordRaw) => {
          const { meta } = route;
          const { roles } = meta || {};
          if (!roles) return true;
          return roleList.some((role) => roles.includes(role));
        };
        routes = filter(asyncRoutes, routeFilter);
        routes = routes.filter(routeFilter);
        // Convert multi-level routing to level 2 routing
        routes = flatMultiLevelRoutes(routes);
        //  If you are sure that you do not need to do background dynamic permissions, please comment the entire judgment below
      } else if (permissionMode === PermissionModeEnum.BACK) {
        const { createMessage } = useMessage();

        createMessage.loading({
          content: t('sys.app.menuLoading'),
          duration: 1,
        });

        // !Simulate to obtain permission codes from the background,
        // this function may only need to be executed once, and the actual project can be put at the right time by itself
        let routeList: AppRouteRecordRaw[] = [];
        try {
          // this.changePermissionCode();
          routeList = await getMenuList(); //请求后端路由菜单数组
          console.log(`routeList == backend`, routeList);
          // 默认路由
          const dashboard = {
            path: '/dashboard',
            name: 'Dashboard',
            component: 'LAYOUT',
            redirect: '/dashboard/analysis',
            meta: {
              icon: 'ion:grid-outline',
              title: 'routes.dashboard.dashboard',
            },
            children: [
              {
                path: 'analysis',
                name: 'Analysis',
                component: '/dashboard/analysis/index',
                meta: {
                  affix: true,
                  title: 'routes.dashboard.analysis',
                },
              },
              {
                path: 'workbench',
                name: 'Workbench',
                component: '/dashboard/workbench/index',
                meta: {
                  title: 'routes.dashboard.workbench',
                },
              },
            ],
          };
          const member = {
            path: '/member',
            name: 'Member',
            component: 'LAYOUT',
            redirect: '/member/person',
            meta: {
              icon: 'ion:grid-outline',
              title: '会员',
            },
            children: [
              {
                path: 'person',
                name: 'Person',
                component: '/member/person/index',
                meta: {
                  affix: true,
                  title: '个人管理',
                },
              },
              {
                path: 'member',
                name: 'Member',
                component: '/member/member/index',
                meta: {
                  affix: true,
                  title: '会员管理',
                },
              },
            ],
          };
          routeList.unshift(member);
          routeList.unshift(dashboard);
        } catch (error) {
          console.error(error);
        }

        // Dynamically introduce components
        routeList = transformObjToRoute(routeList);
        console.log(`routeList2222`, routeList);

        //  Background routing to menu structure
        const backMenuList = transformRouteToMenu(routeList);
        console.log(`backMenuList2222`, backMenuList);
        this.setBackMenuList(backMenuList);

        routeList = flatMultiLevelRoutes(routeList);
        // 404
        routes = [PAGE_NOT_FOUND_ROUTE, ...routeList];
      }
      routes.push(ERROR_LOG_ROUTE);
      return routes;
    },
  },
});

// Need to be used outside the setup
export function usePermissionStoreWidthOut() {
  return usePermissionStore(store);
}