vben admin 源码学习笔记（八）- 权限/菜单/路由信息store-爱代码爱编程

文件路径：src\store\modules\permission.ts

权限/菜单/路由信息Store主要定义存储权限代码列表、是否已动态建立路由、菜单最后更新时间、后端角色权限菜单列表、前端角色权限菜单列表，并注册到项目中，通过getters属性中的方法向外暴露存储的属性，通过提供actions属性中的方法，包括构建动态路buildRoutesAction由便于外部调用。同时导出usePermissionStoreWithOut用于没有使用 setup 组件时使用 。 更多信息，请见代码注释

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 { useAppStoreWithOut } 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';
import { PageEnum } from '/@/enums/pageEnum';

interface PermissionState {
  // 权限代码列表
  permCodeList: string[] | number[];
  // 动态建立路由后设置为true
  isDynamicAddedRoute: boolean;
  // 菜单最后更新时间
  lastBuildMenuTime: number;
  // 后端角色权限菜单列表
  backMenuList: Menu[];
  // 前端角色权限菜单列表
  frontMenuList: Menu[];
}
export const usePermissionStore = defineStore({
  id: 'app-permission',
  state: (): PermissionState => ({
    permCodeList: [], // 权限代码列表
    isDynamicAddedRoute: false, // 动态建立路由后设置为true
    lastBuildMenuTime: 0, // 菜单最后更新时间
    // Backstage menu list
    backMenuList: [], // 后端角色权限菜单列表
    // menu List
    frontMenuList: [], // 前端角色权限菜单列表
  }),
  getters: {
    // 获取权限代码列表
    getPermCodeList(): string[] | number[] {
      return this.permCodeList;
    },
    // 后端菜单
    getBackMenuList(): Menu[] {
      return this.backMenuList;
    },

    // 前端菜单
    getFrontMenuList(): Menu[] {
      return this.frontMenuList;
    },

    // 菜单最后更新时间
    getLastBuildMenuTime(): number {
      return this.lastBuildMenuTime;
    },

    //是否已经动态建立路由
    getIsDynamicAddedRoute(): boolean {
      return this.isDynamicAddedRoute;
    },
  },
  actions: {
    // 设置权限代码列表
    setPermCodeList(codeList: string[]) {
      this.permCodeList = codeList;
    },

    // 设置后端菜单
    setBackMenuList(list: Menu[]) {
      this.backMenuList = list;
      //更新菜单最后更新时间
      list?.length > 0 && this.setLastBuildMenuTime();
    },

    // 设置前端菜单
    setFrontMenuList(list: Menu[]) {
      this.frontMenuList = list;
    },

    // 设置菜单最后更新时间
    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 = useAppStoreWithOut(); // 项目配置信息存储
      let routes: AppRouteRecordRaw[] = [];
      // 用户角色列表
      const roleList = toRaw(userStore.getRoleList) || [];
      // 获取权限模式
      const { permissionMode = projectSetting.permissionMode } = appStore.getProjectConfig;
      // 基于角色过滤方法
      const routeFilter = (route: AppRouteRecordRaw) => {
        const { meta } = route;
        const { roles } = meta || {};
        if (!roles) return true; //true表示允许显示,路由中不设置角色表示允许显示
        return roleList.some((role) => roles.includes(role)); //判断路由设置的角色是否包含用户角色
      };
      // 基于 ignoreRoute 属性过滤
      const routeRemoveIgnoreFilter = (route: AppRouteRecordRaw) => {
        const { meta } = route;
        const { ignoreRoute } = meta || {};
        return !ignoreRoute; // 忽略路由。用于在ROUTE_MAPPING以及BACK权限模式下，生成对应的菜单而忽略路由。2.5.3以上版本有效
      };

      /**
       * @description 根据设置的首页path，修正routes中的affix标记（固定首页）//affix为true,表示不允许关闭tab
       * */
      const patchHomeAffix = (routes: AppRouteRecordRaw[]) => {
        if (!routes || routes.length === 0) return;
        let homePath: string = userStore.getUserInfo.homePath || PageEnum.BASE_HOME; //首页path
        function patcher(routes: AppRouteRecordRaw[], parentPath = '') {
          // 父路径添加'/'
          if (parentPath) parentPath = parentPath + '/';
          routes.forEach((route: AppRouteRecordRaw) => {
            const { path, children, redirect } = route;
            //没有以/开头的路由会加上父路由路径
            const currentPath = path.startsWith('/') ? path : parentPath + path;
            if (currentPath === homePath) {
              // 当前路由是homePath
              if (redirect) {
                homePath = route.redirect! as string;
              } else {
                //非重定向的homePath添加affix为true
                route.meta = Object.assign({}, route.meta, { affix: true });
                throw new Error('end');
              }
            }
            // 递归调用，遍历每一个子项
            children && children.length > 0 && patcher(children, currentPath);
          });
        }
        try {
          patcher(routes);
        } catch (e) {
          // 已处理完毕跳出循环
        }
        return;
      };
      debugger;
      // 不同权限模式处理逻辑
      switch (permissionMode) {
        case PermissionModeEnum.ROLE: // 前端方式控制(菜单和路由分开配置)
          // 这里遍历路由及它的子级，根据角色控制是否允许显示,当子路由需要显示时，不管父路由是否有角色权限都会显示
          routes = filter(asyncRoutes, routeFilter);
          //这里第二次过滤，当父路由没有角色权限，则不论子路由是否有权限，都会过滤掉，不显示
          routes = routes.filter(routeFilter);
          // 将多级路由转换为二级路由
          routes = flatMultiLevelRoutes(routes);
          break;

        case PermissionModeEnum.ROUTE_MAPPING: // 前端方式控制(菜单由路由配置自动生成)
          // 这里遍历路由及它的子级，根据角色控制是否允许显示,当子路由需要显示时，不管父路由是否有角色权限都会显示
          routes = filter(asyncRoutes, routeFilter);
          // 这里第二次过滤，当父路由没有角色权限，则不论子路由是否有权限，都会过滤掉，不显示
          routes = routes.filter(routeFilter);
          // 通过转换路由生成菜单
          const menuList = transformRouteToMenu(routes, true);
          // 移除属性 meta.ignoreRoute 路由
          routes = filter(routes, routeRemoveIgnoreFilter);
          routes = routes.filter(routeRemoveIgnoreFilter);
          // 菜单排序
          menuList.sort((a, b) => {
            return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0);
          });
          // 设置菜单
          this.setFrontMenuList(menuList);
          // 将多级路由转换为二级路由
          routes = flatMultiLevelRoutes(routes);
          break;

        //  If you are sure that you do not need to do background dynamic permissions, please comment the entire judgment below
        case PermissionModeEnum.BACK: // 后台方式控制
          // 页面提升菜单加载中
          const { createMessage } = useMessage();
          createMessage.loading({
            content: t('sys.app.menuLoading'),
            duration: 1,
          });

          // 模拟从后台获取权限码,
          // 这个函数可能只需要执行一次，实际项目本身就可以放在合适的时间
          let routeList: AppRouteRecordRaw[] = [];
          try {
            //改变权限代码列表
            this.changePermissionCode();
            // 获取菜单路由
            routeList = (await getMenuList()) as AppRouteRecordRaw[];
          } catch (error) {
            console.error(error);
          }

          // 动态引入组件
          routeList = transformObjToRoute(routeList);

          // 后台路由转菜单结构
          const backMenuList = transformRouteToMenu(routeList);
          // 数组后台菜单
          this.setBackMenuList(backMenuList);

          // 删除ignoreRoute项
          routeList = filter(routeList, routeRemoveIgnoreFilter);
          routeList = routeList.filter(routeRemoveIgnoreFilter);
          // 将多级路由转换为二级路由
          routeList = flatMultiLevelRoutes(routeList);
          // 添加404页
          routes = [PAGE_NOT_FOUND_ROUTE, ...routeList];
          break;
      }

      routes.push(ERROR_LOG_ROUTE); // 添加`错误日志列表`页面路由
      //根据设置的首页path，修正routes中的affix标记（固定首页）//affix为true,表示不允许关闭tab
      patchHomeAffix(routes);
      return routes;
    },
  },
});

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