You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
4.0 KiB
131 lines
4.0 KiB
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<RouteRecordRaw[]>([]);
|
|
|
|
// actions
|
|
function setRoutes(newRoutes: RouteRecordRaw[]) {
|
|
routes.value = constantRoutes.concat(newRoutes);
|
|
}
|
|
/**
|
|
* 生成动态路由
|
|
*
|
|
* @param roles 用户角色集合
|
|
* @returns
|
|
*/
|
|
function generateRoutes(roles: string[]) {
|
|
return new Promise<RouteRecordRaw[]>((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);
|
|
}
|
|
|