import type { RouteRecordRaw } from "vue-router";
|
import { constantRoutes } from "@/router";
|
import { store, useUserStore } from "@/store";
|
import router from "@/router";
|
|
import { type RouteVO } from "@/api/system/menu.api";
|
import adminRoutes from "@/router/admin.routes";
|
import customerRoutes from "@/router/customer.routes";
|
const modules = import.meta.glob("../../views/**/**.vue");
|
const Layout = () => import("@/layout/index.vue");
|
|
export const usePermissionStore = defineStore("permission", () => {
|
const { userInfo } = useUserStore();
|
// 储所有路由，包括静态路由和动态路由
|
const routes = ref<RouteRecordRaw[]>([]);
|
// 混合模式左侧菜单路由
|
const mixedLayoutLeftRoutes = ref<RouteRecordRaw[]>([]);
|
// 路由是否加载完成
|
const isRoutesLoaded = ref(false);
|
|
/**
|
* 获取后台动态路由数据，解析并注册到全局路由
|
*
|
* @returns Promise<RouteRecordRaw[]> 解析后的动态路由列表
|
*/
|
function generateRoutes() {
|
return new Promise<RouteRecordRaw[]>((resolve) => {
|
let dynamicRoutes = [];
|
if (userInfo.roleId === 2) {
|
dynamicRoutes = parseDynamicRoutes(adminRoutes);
|
} else {
|
dynamicRoutes = parseDynamicRoutes(customerRoutes);
|
}
|
routes.value = [...constantRoutes, ...dynamicRoutes];
|
isRoutesLoaded.value = true;
|
resolve(dynamicRoutes);
|
});
|
}
|
|
/**
|
* 根据父菜单路径设置混合模式左侧菜单
|
*
|
* @param parentPath 父菜单的路径，用于查找对应的菜单项
|
*/
|
const setMixedLayoutLeftRoutes = (parentPath: string) => {
|
const matchedItem = routes.value.find((item) => item.path === parentPath);
|
if (matchedItem && matchedItem.children) {
|
mixedLayoutLeftRoutes.value = matchedItem.children;
|
}
|
};
|
|
/**
|
* 重置路由
|
*/
|
const resetRouter = () => {
|
// 从 router 实例中移除动态路由
|
routes.value.forEach((route) => {
|
if (route.name && !constantRoutes.find((r) => r.name === route.name)) {
|
router.removeRoute(route.name);
|
}
|
});
|
|
// 清空本地存储的路由和菜单数据
|
routes.value = [];
|
mixedLayoutLeftRoutes.value = [];
|
isRoutesLoaded.value = false;
|
};
|
|
return {
|
routes,
|
mixedLayoutLeftRoutes,
|
isRoutesLoaded,
|
generateRoutes,
|
setMixedLayoutLeftRoutes,
|
resetRouter,
|
};
|
});
|
|
/**
|
* 解析后端返回的路由数据并转换为 Vue Router 兼容的路由配置
|
*
|
* @param rawRoutes 后端返回的原始路由数据
|
* @returns 解析后的路由配置数组
|
*/
|
const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
|
const parsedRoutes: RouteRecordRaw[] = [];
|
|
rawRoutes.forEach((route) => {
|
const normalizedRoute = { ...route } as RouteRecordRaw;
|
|
// 处理组件路径
|
normalizedRoute.component =
|
normalizedRoute.component?.toString() === "Layout"
|
? Layout
|
: modules[`../../views/${normalizedRoute.component}.vue`] ||
|
modules["../../views/error-page/404.vue"];
|
|
// 递归解析子路由
|
if (normalizedRoute.children) {
|
normalizedRoute.children = parseDynamicRoutes(route.children);
|
}
|
|
parsedRoutes.push(normalizedRoute);
|
});
|
|
return parsedRoutes;
|
};
|
/**
|
* 在组件外使用 Pinia store 实例 @see https://pinia.vuejs.org/core-concepts/outside-component-usage.html
|
*/
|
export function usePermissionStoreHook() {
|
return usePermissionStore(store);
|
}
|
