import { RouteRecordRaw } from "vue-router"; import { defineStore } from "pinia"; import { constantRoutes } from "@/router"; import { store } from "@/store"; import { listRoutes } from "@/api/menu"; const modules = import.meta.glob("../../views/**/*.vue"); const Layout = () => import("@/layout/index.vue"); /** * Use meta.role to determine if the current user has permission * * @param roles 用户角色集合 * @param route 路由 * @returns */ const hasPermission = (roles: string[], route: RouteRecordRaw) => { // console.log("用户角色集合--->",roles.includes("ROOT"),roles,route) if (route.meta && route.meta.perm) { if (roles.includes("ROOT")) { return true; } return roles.some((role) => { if (route.meta?.perm !== undefined) { return (route.meta.perm as string[]).includes(role); } }); } // if (route.meta && route.meta.roles) { // // 角色【超级管理员】拥有所有权限,忽略校验 // if (roles.includes("ROOT")) { // return true; // } // return roles.some((role) => { // if (route.meta?.roles !== undefined) { // return (route.meta.roles as string[]).includes(role); // } // }); // } return false; }; /** * 递归过滤有权限的异步(动态)路由 * * @param routes 接口返回的异步(动态)路由 * @param roles 用户角色集合 * @returns 返回用户有权限的异步(动态)路由 */ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => { const asyncRoutes: RouteRecordRaw[] = []; // console.log("判断--->",routes,roles); routes.forEach((route) => { const tmpRoute = { ...route }; // ES6扩展运算符复制新对象 // console.log("判断-123-->",tmpRoute.name,tmpRoute.component,tmpRoute,roles); // console.log("判断-hasPermission-->",hasPermission(roles, tmpRoute)); // 判断用户(角色)是否有该路由的访问权限 if (hasPermission(roles, tmpRoute)) { if (tmpRoute.component?.toString() == "Layout") { tmpRoute.component = Layout; // console.log(); } else { // console.log("判断用户-251->",tmpRoute.component); const component = modules[`../../views/${tmpRoute.component}.vue`]; // const component = modules[`${tmpRoute.component}.vue`]; // console.log("判断用户-1111111111111111->",component); if (component) { tmpRoute.component = component; } else { tmpRoute.component = modules[`../../views/error-page/404.vue`]; } } if (tmpRoute.children) { tmpRoute.children = filterAsyncRoutes(tmpRoute.children, roles); } // console.log("判断用户--路由--->",roles,tmpRoute); asyncRoutes.push(tmpRoute); } }); return asyncRoutes; }; // setup export const usePermissionStore = defineStore("permission", () => { // state const routes = ref([]); // actions function setRoutes(newRoutes: RouteRecordRaw[]) { routes.value = constantRoutes.concat(newRoutes); } /** * 生成动态路由 * * @param roles 用户角色集合 * @returns */ function generateRoutes(roles: string[]) { return new Promise((resolve, reject) => { // 接口获取所有路由 listRoutes() .then(({ data: asyncRoutes }) => { // 根据角色获取有访问权限的路由 // console.log("获取到的路由---->",asyncRoutes); const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles); // console.log("获取到的路由--1-->",accessedRoutes); // console.log("获取到的路由--2-->",roles); setRoutes(accessedRoutes); resolve(accessedRoutes); }) .catch((error) => { reject(error); }); }); } // console.log("获取到的路由--3->",routes) // console.log("获取到的路由--4->",setRoutes) // console.log("获取到的路由--5->",generateRoutes) return { routes, setRoutes, generateRoutes }; }); // 非setup export function usePermissionStoreHook() { return usePermissionStore(store); }