shuimu-dashboard-h5/src/store/modules/permission.ts

import {RouteRecordRaw} from "vue-router";
import {defineStore} from "pinia";
import {constantRoutes} from "@/router";
import {store} from "@/store";

const modules = import.meta.glob("../../views/**/**.vue");
// 不同角色，不同首页
const Layout = () => import("@/layout/school.vue");
const Admin = () => import("@/layout/admin.vue");
// 角色【后台管理员】拥有的权限路由
const adminRoutes: RouteRecordRaw[] = JSON.parse(
  JSON.stringify([
    {
      path: "/",
      redirect: "/areaBoard",
      meta: {hidden: true, breadcrumb: false, name: "Home"},
    },
    {
      path: "/areaBoard",
      component: "AdminIndex",
      redirect: "/areaBoard/index",
      meta: {title: "区域级数据看板", name: "AreaBoard"},
      children: [
        {
          path: "index",
          component: "admin/area/index",
          meta: {
            title: "区域级数据看板",
            name: "DashboardArea",
            icon: "board",
            keepAlive: true,
            breadcrumb: false,
          },
        },
      ],
    },
    {
      path: "/schoolBoard",
      component: "AdminIndex",
      redirect: "/schoolBoard/index",
      meta: {title: "学校级数据看板", name: "SchoolBoard"},
      children: [
        {
          path: "index",
          component: "admin/school/index",
          meta: {
            title: "学校级数据看板",
            name: "DashboardSchool",
            icon: "board",
            keepAlive: true,
            breadcrumb: false,
          },
        },
      ],
    },
  ])
);
// 角色【学校负责人】拥有的权限路由
const schoolRoutes: RouteRecordRaw[] = JSON.parse(
  JSON.stringify([
    {
      path: "/",
      redirect: "/dashboard",
      meta: {hidden: true, breadcrumb: false, name: "Home"},
    },
    {
      path: "/dashboard",
      component: "SchoolIndex",
      redirect: "/dashboard/index",
      meta: {title: "数据看板", name: "Dashboard"},
      children: [
        {
          path: "index",
          component: "customer/dashboard/index",
          meta: {
            title: "数据看板",
            name: "DashboardIndex",
            icon: "board",
            keepAlive: true,
            breadcrumb: false,
          },
        },
        {
          path: "example",
          component: "customer/dashboard/example",
          meta: {
            title: "优秀教学效果示例",
            name: "DashboardExample",
            hidden: true,
          },
        },
      ],
    },
    {
      path: "/grade",
      component: "SchoolIndex",
      redirect: "/grade/index",
      meta: {title: "班级管理", name: "ClassManage"},
      children: [
        {
          path: "index",
          component: "customer/grade/index",
          meta: {
            title: "班级管理",
            name: "ClassIndex",
            icon: "class",
            keepAlive: true,
            breadcrumb: false,
          },
        },
      ],
    },
    {
      path: "/teacher",
      component: "SchoolIndex",
      redirect: "/teacher/index",
      meta: {title: "教师管理", name: "TeacherManage"},
      children: [
        {
          path: "index",
          component: "customer/teacher/index",
          meta: {
            title: "教师管理",
            name: "TeacherIndex",
            icon: "teacher",
            keepAlive: true,
            breadcrumb: false,
          },
        },
      ],
    },
    {
      path: "/student",
      component: "SchoolIndex",
      redirect: "/student/index",
      meta: {title: "学生管理", name: "StudentManage"},
      children: [
        {
          path: "index",
          component: "customer/student/index",
          meta: {
            title: "学生管理",
            name: "StudentIndex",
            icon: "student",
            keepAlive: true,
            breadcrumb: false,
          },
        },
        {
          path: "result",
          component: "customer/student/result",
          meta: {title: "训练效果分析", name: "StudentResult", hidden: true},
        },
      ],
    },
    {
      path: "/download/student/result",
      component: "customer/student/download",
      meta: {title: "下载报告预览", name: "StudentDownload", hidden: true},
    },
    {
      path: "/equipment",
      component: "SchoolIndex",
      redirect: "/equipment/index",
      meta: {title: "设备管理", name: "EquipmentManage"},
      children: [
        {
          path: "index",
          component: "customer/equipment/index",
          meta: {
            title: "设备管理",
            name: "EquipmentIndex",
            icon: "equipment",
            keepAlive: true,
            breadcrumb: false,
          },
        },
      ],
    },
    {
      path: "/training",
      component: "SchoolIndex",
      redirect: "/training/index",
      meta: {title: "训练管理", name: "TrainingManage"},
      children: [
        {
          path: "index",
          component: "customer/training/index",
          meta: {
            title: "训练记录",
            name: "TrainingIndex",
            icon: "training",
            keepAlive: true,
            breadcrumb: false,
          },
        },
        {
          path: "result",
          component: "customer/training/result",
          meta: {title: "报告详情", name: "TrainingResult", hidden: true},
        },
      ],
    },
    {
      path: "/evaluation",
      component: "SchoolIndex",
      redirect: "/evaluation/index",
      meta: {title: "测评数据看板", name: "EvaluateManage"},
      children: [
        {
          path: "index",
          component: "customer/evaluation/index",
          meta: {
            title: "测评数据看板",
            name: "EvaluateIndex",
            icon: "evaluation",
            keepAlive: true,
            breadcrumb: false,
          },
        },
      ],
    },
  ])
);
/**
 * 递归过滤有权限的异步(动态)路由
 *
 * @param routes 接口返回的异步(动态)路由
 * @param role 用户角色集合
 * @returns 返回用户有权限的异步(动态)路由
 */
const filterAsyncRoutes = (routes: RouteRecordRaw[], role: string | null) => {
  const asyncRoutes: RouteRecordRaw[] = [];

  routes.forEach((route) => {
    const tmpRoute = {...route}; // ES6扩展运算符复制新对象

    if (tmpRoute.component?.toString() == "SchoolIndex") {
      tmpRoute.component = Layout;
    } else if (tmpRoute.component?.toString() == "AdminIndex") {
      tmpRoute.component = Admin;
    } else {
      const component = modules[`../../views/${tmpRoute.component}.vue`];
      if (component) {
        tmpRoute.component = component;
      } else {
        tmpRoute.component = modules[`../../views/error-page/404.vue`];
      }
    }

    if (tmpRoute.children) {
      tmpRoute.children = filterAsyncRoutes(tmpRoute.children, role);
    }

    asyncRoutes.push(tmpRoute);
  });

  return asyncRoutes;
};

// setup
export const usePermissionStore = defineStore("permission", () => {
  // state
  const routes = ref<RouteRecordRaw[]>([]);

  // actions
  function setRoutes(newRoutes: RouteRecordRaw[]) {
    routes.value = constantRoutes.concat(newRoutes);
  }
  /**
   * 生成动态路由
   *
   * @param role 用户角色集合
   * @returns
   */
  function generateRoutes(role: string | null) {
    return new Promise<RouteRecordRaw[]>((resolve, reject) => {
      console.log("role", role);
      // 角色【后台管理员】拥有权限
      if (role && role == "ADMIN") {
        // 根据角色获取有访问权限的路由
        const accessedRoutes = filterAsyncRoutes(adminRoutes, role);
        setRoutes(accessedRoutes);
        resolve(accessedRoutes);
      }
      // 角色【学校负责人】拥有权限
      else if (role && role == "SCHOOL") {
        const accessedRoutes = filterAsyncRoutes(schoolRoutes, role);
        setRoutes(accessedRoutes);
        resolve(accessedRoutes);
      } else {
        reject("没有访问权限");
      }
    });
  }
  return {routes, setRoutes, generateRoutes};
});

// 非setup
export function usePermissionStoreHook() {
  return usePermissionStore(store);
}