Ai
1 Star 0 Fork 996

半糖芒果酥/vue-pure-admin

forked from zym/vue-pure-admin 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
utils.ts 17.35 KB
一键复制 编辑 原始数据 按行查看 历史
import {
type RouterHistory,
type RouteRecordRaw,
type RouteComponent,
createWebHistory,
createWebHashHistory
} from "vue-router";
import { router } from "./index";
import { isProxy, toRaw } from "vue";
import { useTimeoutFn } from "@vueuse/core";
import {
isString,
cloneDeep,
isAllEmpty,
intersection,
storageLocal,
isIncludeAllChildren
} from "@pureadmin/utils";
import {
//systemManagementRouter,
systemMonitorRouter,
permissionRouter,
frameRouter,
tabsRouter
} from "@/api/mock";
import { getConfig } from "@/config";
import { buildHierarchyTree } from "@/utils/tree";
import { userKey, ROOTRoleCode, type DataInfo } from "@/utils/auth";
import { type menuType, routerArrays } from "@/layout/types";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { usePermissionStoreHook } from "@/store/modules/permission";
import MenuApi from "@/api/system/menu";
const IFrame = () => import("@/layout/frame.vue");
// https://cn.vitejs.dev/guide/features.html#glob-import
const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
// 动态路由
// import { getAsyncRoutes } from "@/api/routes";
function handRank(routeInfo: any) {
const { name, path, parentId, meta } = routeInfo;
return isAllEmpty(parentId)
? isAllEmpty(meta?.rank) ||
(meta?.rank === 0 && name !== "Home" && path !== "/")
? true
: false
: false;
}
/** 按照路由中meta下的rank等级升序来排序路由 */
function ascending(arr: any[]) {
arr.forEach((v, index) => {
// 当rank不存在时,根据顺序自动创建,首页路由永远在第一位
if (handRank(v)) v.meta.rank = index + 2;
});
return arr.sort(
(a: { meta: { rank: number } }, b: { meta: { rank: number } }) => {
return a?.meta.rank - b?.meta.rank;
}
);
}
/** 过滤meta中showLink为false的菜单 */
function filterTree(data: RouteComponent[]) {
const newTree = cloneDeep(data).filter(
(v: { meta: { showLink: boolean } }) => v.meta?.showLink !== false
);
newTree.forEach(
(v: { children }) => v.children && (v.children = filterTree(v.children))
);
return newTree;
}
/** 过滤children长度为0的的目录,当目录下没有菜单时,会过滤此目录,目录没有赋予roles权限,当目录下只要有一个菜单有显示权限,那么此目录就会显示 */
function filterChildrenTree(data: RouteComponent[]) {
const newTree = cloneDeep(data).filter((v: any) => v?.children?.length !== 0);
newTree.forEach(
(v: { children }) => v.children && (v.children = filterTree(v.children))
);
return newTree;
}
/** 判断两个数组彼此是否存在相同值 */
function isOneOfArray(a: Array<string>, b: Array<string>) {
return Array.isArray(a) && Array.isArray(b)
? intersection(a, b).length > 0
? true
: false
: true;
}
/** 从localStorage里取出当前登录用户的角色roles,过滤无权限的菜单 */
function filterNoPermissionTree(data: RouteComponent[]) {
const currentRoles =
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
// 如果当前的用户的角色码中包含ROOTRoleCode,则代表当前用户为超级管理员,超级管理员拥有所有菜单权限,不需要过滤
const newTree = isOneOfArray(ROOTRoleCode, currentRoles)
? cloneDeep(data)
: cloneDeep(data).filter((v: any) =>
isOneOfArray(v.meta?.roles, currentRoles)
);
newTree.forEach(
(v: any) => v.children && (v.children = filterNoPermissionTree(v.children))
);
return filterChildrenTree(newTree);
}
/** 通过指定 `key` 获取父级路径集合,默认 `key` 为 `path` */
function getParentPaths(value: string, routes: RouteRecordRaw[], key = "path") {
// 深度遍历查找
function dfs(routes: RouteRecordRaw[], value: string, parents: string[]) {
for (let i = 0; i < routes.length; i++) {
const item = routes[i];
// 返回父级path
if (item[key] === value) return parents;
// children不存在或为空则不递归
if (!item.children || !item.children.length) continue;
// 往下查找时将当前path入栈
parents.push(item.path);
if (dfs(item.children, value, parents).length) return parents;
// 深度遍历查找未找到时当前path 出栈
parents.pop();
}
// 未找到时返回空数组
return [];
}
return dfs(routes, value, []);
}
/** 查找对应 `path` 的路由信息 */
function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
let res = routes.find((item: { path: string }) => item.path == path);
if (res) {
return isProxy(res) ? toRaw(res) : res;
} else {
for (let i = 0; i < routes.length; i++) {
if (
routes[i].children instanceof Array &&
routes[i].children.length > 0
) {
res = findRouteByPath(path, routes[i].children);
if (res) {
return isProxy(res) ? toRaw(res) : res;
}
}
}
return null;
}
}
/** 动态路由注册完成后,再添加全屏404(页面不存在)页面,避免刷新动态路由页面时误跳转到404页面 */
function addPathMatch() {
if (!router.hasRoute("pathMatch")) {
router.addRoute({
path: "/:pathMatch(.*)*",
name: "PageNotFound",
component: () => import("@/views/error/404.vue"),
meta: {
title: "menus.purePageNotFound",
showLink: false
}
});
}
}
/** 处理动态路由(后端返回的路由) */
function handleAsyncRoutes(routeList) {
if (routeList.length === 0) {
usePermissionStoreHook().handleWholeMenus(routeList);
} else {
formatFlatteningRoutes(addAsyncRoutes(routeList)).map(
(v: RouteRecordRaw) => {
// 防止重复添加路由
if (
router.options.routes[0].children.findIndex(
value => value.path === v.path
) !== -1
) {
return;
} else {
// 切记将路由push到routes后还需要使用addRoute,这样路由才能正常跳转
router.options.routes[0].children.push(v);
// 最终路由进行升序
ascending(router.options.routes[0].children);
if (!router.hasRoute(v?.name)) router.addRoute(v);
const flattenRouters: any = router
.getRoutes()
.find(n => n.path === "/");
// 保持router.options.routes[0].children与path为"/"的children一致,防止数据不一致导致异常
flattenRouters.children = router.options.routes[0].children;
router.addRoute(flattenRouters);
}
}
);
usePermissionStoreHook().handleWholeMenus(routeList);
}
if (!useMultiTagsStoreHook().getMultiTagsCache) {
useMultiTagsStoreHook().handleTags("equal", [
...routerArrays,
...usePermissionStoreHook().flatteningRoutes.filter(
v => v?.meta?.fixedTag
)
]);
}
addPathMatch();
}
/** 初始化路由(`new Promise` 写法防止在异步请求中造成无限循环)*/
function initRouter() {
if (getConfig()?.CachingAsyncRoutes) {
// 开启动态路由缓存本地localStorage
const key = "async-routes";
const asyncRouteList = storageLocal().getItem(key) as any;
if (asyncRouteList && asyncRouteList?.length > 0) {
return new Promise(resolve => {
handleAsyncRoutes(asyncRouteList);
resolve(router);
});
} else {
return new Promise(resolve => {
// getAsyncRoutes()
MenuApi.loadRouter().then(({ data }) => {
const menuData = convert(data);
handleAsyncRoutes(menuData);
storageLocal().setItem(key, menuData);
resolve(router);
});
});
}
} else {
// return new Promise(resolve => {
// getAsyncRoutes().then(({ data }) => {
// const menuData = cloneDeep(data);
// console.log("menuData", menuData);
// handleAsyncRoutes(menuData);
// resolve(router);
// });
// });
return new Promise(resolve => {
// getAsyncRoutes()
MenuApi.loadRouter().then(({ data }) => {
const menuData = convert(data);
handleAsyncRoutes(
import.meta.env.DEV
? menuData.concat([
systemMonitorRouter,
permissionRouter,
frameRouter,
tabsRouter
])
: menuData
// menuData.concat([
// systemMonitorRouter,
// permissionRouter,
// frameRouter,
// tabsRouter
// ])
);
resolve(router);
});
});
}
}
/** 转换成前端能用的菜单结构 */
function convert(data: SystemMenuType.Router[]): any[] {
return data
? data.map(item => {
const node = {
path: item.path?.startsWith("/")
? item.path
: "/" + (item.path ?? item.name),
name: item.name,
component: item.component,
redirect: item.redirect, // 路由重定向
isBlank: item.isBlank, // 是否打开新页面
params: {}, // 路由参数,参数的值类型为字符串和数字不能为其他类型
meta: {
title: item.title, // 菜单名称(兼容国际化、非国际化,如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加)
icon: item.icon, // 菜单图标
extraIcon: item.meta?.extraIcon, // 菜单名称右侧的额外图标
showLink: item.hidden === 0, // 是否在菜单中显示
showParent: item.alwaysShow === 1, // 当所有子菜单只有一个时,是否显示父级菜单
roles: item.meta?.roles, // 页面级别权限设置
auths: item.rolePermissions.map(rp => rp.btnPerm), // 按钮级别权限设置
keepAlive: item.isCache === 1, // 路由组件缓存(开启 `true`、关闭 `false`)
frameLoading: item.meta?.frameLoading, // 页面加载动画
hiddenTag: item.meta?.hiddenTag, // 当前菜单名称或自定义信息禁止添加到标签页(默认`false`)
fixedTag: item.meta?.fixedTag, // 当前菜单名称是否固定显示在标签页且不可关闭(默认`false`)
dynamicLevel: item.meta?.dynamicLevel, // 动态路由可打开的最大数量 `可选`
activePath: item.meta?.activePath, // 将某个菜单激活
rank: item.sort // 排序
}
};
const frameSrc = item.component ?? "";
if (frameSrc.startsWith("http://") || frameSrc.startsWith("https://")) {
node.meta["frameSrc"] = frameSrc; // 内嵌的`iframe`链接
}
// 自定义路由参数
if (item.props) {
const props = JSON.parse(item.props);
if (props.params) {
node.params = props.params; // 路由参数
}
node.meta = { ...node.meta, ...props };
}
const children = item.children ? convert(item.children) : [];
if (children.length > 0) {
node["children"] = children; // 子集
}
return node;
})
: [];
}
/**
* 将多级嵌套路由处理成一维数组
* @param routesList 传入路由
* @returns 返回处理后的一维路由
*/
function formatFlatteningRoutes(routesList: RouteRecordRaw[]) {
if (routesList.length === 0) return routesList;
let hierarchyList = buildHierarchyTree(routesList);
for (let i = 0; i < hierarchyList.length; i++) {
if (hierarchyList[i].children) {
hierarchyList = hierarchyList
.slice(0, i + 1)
.concat(hierarchyList[i].children, hierarchyList.slice(i + 1));
}
}
return hierarchyList;
}
/**
* 一维数组处理成多级嵌套数组(三级及以上的路由全部拍成二级,keep-alive 只支持到二级缓存)
* https://github.com/pure-admin/vue-pure-admin/issues/67
* @param routesList 处理后的一维路由菜单数组
* @returns 返回将一维数组重新处理成规定路由的格式
*/
function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
if (routesList.length === 0) return routesList;
const newRoutesList: RouteRecordRaw[] = [];
routesList.forEach((v: RouteRecordRaw) => {
if (v.path === "/") {
newRoutesList.push({
component: v.component,
name: v.name,
path: v.path,
redirect: v.redirect,
meta: v.meta,
children: []
});
} else {
newRoutesList[0]?.children.push({ ...v });
}
});
return newRoutesList;
}
/** 处理缓存路由(添加、删除、刷新) */
function handleAliveRoute({ name }: ToRouteType, mode?: string) {
switch (mode) {
case "add":
usePermissionStoreHook().cacheOperate({
mode: "add",
name
});
break;
case "delete":
usePermissionStoreHook().cacheOperate({
mode: "delete",
name
});
break;
case "refresh":
usePermissionStoreHook().cacheOperate({
mode: "refresh",
name
});
break;
default:
usePermissionStoreHook().cacheOperate({
mode: "delete",
name
});
useTimeoutFn(() => {
usePermissionStoreHook().cacheOperate({
mode: "add",
name
});
}, 100);
}
}
/** 过滤后端传来的动态路由 重新生成规范路由 */
function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
if (!arrRoutes || !arrRoutes.length) return;
const modulesRoutesKeys = Object.keys(modulesRoutes);
arrRoutes.forEach((v: RouteRecordRaw) => {
// 将backstage属性加入meta,标识此路由为后端返回路由
v.meta.backstage = true;
// 父级的redirect属性取值:如果子级存在且父级的redirect属性不存在,默认取第一个子级的path;如果子级存在且父级的redirect属性存在,取存在的redirect属性,会覆盖默认值
if (v?.children && v.children.length && !v.redirect)
v.redirect = v.children[0].path;
// 父级的name属性取值:如果子级存在且父级的name属性不存在,默认取第一个子级的name;如果子级存在且父级的name属性存在,取存在的name属性,会覆盖默认值(注意:测试中发现父级的name不能和子级name重复,如果重复会造成重定向无效(跳转404),所以这里给父级的name起名的时候后面会自动加上`Parent`,避免重复)
if (v?.children && v.children.length && !v.name)
v.name = (v.children[0].name as string) + "Parent";
if (v.meta?.frameSrc) {
v.component = IFrame;
} else {
// 对后端传component组件路径和不传做兼容(如果后端传component组件路径,那么path可以随便写,如果不传,component组件路径会跟path保持一致)
const index = v?.component
? modulesRoutesKeys.findIndex(ev => ev.includes(v.component as any))
: modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
v.component = modulesRoutes[modulesRoutesKeys[index]];
}
if (v?.children && v.children.length) {
addAsyncRoutes(v.children);
}
});
return arrRoutes;
}
/** 获取路由历史模式 https://next.router.vuejs.org/zh/guide/essentials/history-mode.html */
function getHistoryMode(routerHistory): RouterHistory {
// len为1 代表只有历史模式 为2 代表历史模式中存在base参数 https://next.router.vuejs.org/zh/api/#%E5%8F%82%E6%95%B0-1
const historyMode = routerHistory.split(",");
const leftMode = historyMode[0];
const rightMode = historyMode[1];
// no param
if (historyMode.length === 1) {
if (leftMode === "hash") {
return createWebHashHistory("");
} else if (leftMode === "h5") {
return createWebHistory("");
}
} //has param
else if (historyMode.length === 2) {
if (leftMode === "hash") {
return createWebHashHistory(rightMode);
} else if (leftMode === "h5") {
return createWebHistory(rightMode);
}
}
}
/** 获取当前页面按钮级别的权限 */
function getAuths(): Array<string> {
return router.currentRoute.value.meta.auths as Array<string>;
}
/** 是否有按钮级别的权限(根据路由`meta`中的`auths`字段进行判断)*/
function hasAuth(value: string | Array<string>): boolean {
const currentRoles =
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
// 如果是超级管理员,超级管理员拥有所有菜单权限,不需要过滤
if (isOneOfArray(ROOTRoleCode, currentRoles)) return true;
if (!value) return false;
/** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */
const metaAuths = getAuths();
if (!metaAuths) return false;
const isAuths = isString(value)
? metaAuths.includes(value)
: isIncludeAllChildren(value, metaAuths);
return isAuths ? true : false;
}
function handleTopMenu(route) {
if (route?.children && route.children.length > 1) {
if (route.redirect) {
return route.children.filter(cur => cur.path === route.redirect)[0];
} else {
return route.children[0];
}
} else {
return route;
}
}
/** 获取所有菜单中的第一个菜单(顶级菜单)*/
function getTopMenu(tag = false): menuType {
const topMenu = handleTopMenu(
usePermissionStoreHook().wholeMenus[0]?.children[0]
);
tag && useMultiTagsStoreHook().handleTags("push", topMenu);
return topMenu;
}
export {
hasAuth,
getAuths,
ascending,
filterTree,
initRouter,
getTopMenu,
addPathMatch,
isOneOfArray,
getHistoryMode,
addAsyncRoutes,
getParentPaths,
findRouteByPath,
handleAliveRoute,
formatTwoStageRoutes,
formatFlatteningRoutes,
filterNoPermissionTree
};
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
TypeScript
1
https://gitee.com/mangocrisp/vue-pure-admin.git
git@gitee.com:mangocrisp/vue-pure-admin.git
mangocrisp
vue-pure-admin
vue-pure-admin
main

搜索帮助