This commit is contained in:
吴红兵
2025-12-02 10:37:49 +08:00
commit 1f645dad3e
1183 changed files with 147673 additions and 0 deletions

168
src/router/backEnd.ts Normal file
View File

@@ -0,0 +1,168 @@
import { RouteRecordRaw } from 'vue-router';
import pinia from '/@/stores/index';
import { useUserInfo } from '/@/stores/userInfo';
import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
import { Session } from '/@/utils/storage';
import { NextLoading } from '/@/utils/loading';
import { baseRoutes, notFoundAndNoPower, dynamicRoutes } from '/@/router/route';
import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
import { useRoutesList } from '/@/stores/routesList';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useMenuApi } from '/@/api/admin/menu';
// 后端控制路由
// 引入 api 请求接口
const menuApi = useMenuApi();
/**
* 获取目录下的 .vue、.tsx 全部文件
* @method import.meta.glob
* @link 参考https://cn.vitejs.dev/guide/features.html#json
*/
const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...layouModules }, { ...viewsModules });
/**
* 后端控制路由:初始化方法,防止刷新时路由丢失
* @method NextLoading 界面 loading 动画开始执行
* @method useUserInfo().setUserInfos() 触发初始化用户信息 pinia
* @method useRequestOldRoutes().setRequestOldRoutes() 存储接口原始路由未处理component根据需求选择使用
* @method setAddRoute 添加动态路由
* @method setFilterMenuAndCacheTagsViewRoutes 设置路由到 pinia routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组
*/
export async function initBackEndControlRoutes() {
// 界面 loading 动画开始执行
if (window.nextLoading === undefined) NextLoading.start();
// 无 token 停止执行下一步
if (!Session.getToken()) return false;
// 触发初始化用户信息 pinia
await useUserInfo().setUserInfos();
// 获取路由菜单数据
const res = await getBackEndControlRoutes();
// 无登录权限时,添加判断
// https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO
if ((res.data || []).length <= 0) return Promise.resolve(true);
// 存储接口原始路由未处理component根据需求选择使用
useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data)));
// 处理路由component替换 baseRoutes/@/router/route第一个顶级 children 的路由
baseRoutes[0].children = [...dynamicRoutes, ...(await backEndComponent(res.data))];
// 添加动态路由
await setAddRoute();
// 设置路由到 pinia routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组
await setFilterMenuAndCacheTagsViewRoutes();
}
/**
* 设置路由到 pinia routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组
* @description 用于左侧菜单、横向菜单的显示
* @description 用于 tagsView、菜单搜索中未过滤隐藏的(isHide)
*/
export async function setFilterMenuAndCacheTagsViewRoutes() {
const storesRoutesList = useRoutesList(pinia);
storesRoutesList.setRoutesList(baseRoutes[0].children as any);
setCacheTagsViewRoutes();
}
/**
* 缓存多级嵌套数组处理后的一维数组
* @description 用于 tagsView、菜单搜索中未过滤隐藏的(isHide)
*/
export function setCacheTagsViewRoutes() {
const storesTagsView = useTagsViewRoutes(pinia);
storesTagsView.setTagsViewRoutes(formatTwoStageRoutes(formatFlatteningRoutes(baseRoutes))[0].children);
}
/**
* 处理路由格式及添加捕获所有路由或 404 Not found 路由
* @description 替换 baseRoutes/@/router/route第一个顶级 children 的路由
* @returns 返回替换后的路由数组
*/
export function setFilterRouteEnd() {
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(baseRoutes));
// notFoundAndNoPower 防止 404、401 不在 layout 布局中不设置的话404、401 界面将全屏显示
// 关联问题 No match found for location with path 'xxx'
filterRouteEnd[0].children = [...filterRouteEnd[0].children, ...notFoundAndNoPower];
return filterRouteEnd;
}
/**
* 添加动态路由
* @method router.addRoute
* @description 此处循环为 baseRoutes/@/router/route第一个顶级 children 的路由一维数组,非多级嵌套
* @link 参考https://next.router.vuejs.org/zh/api/#addroute
*/
export async function setAddRoute() {
await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
router.addRoute(route);
});
}
/**
* 请求后端路由菜单接口
* @description isRequestRoutes 为 true则开启后端控制路由
* @returns 返回后端路由菜单数据
*/
export function getBackEndControlRoutes() {
return menuApi.getAdminMenu();
}
/**
* 重新请求后端路由菜单接口
* @description 用于菜单管理界面刷新菜单(未进行测试)
* @description 路径:/src/views/admin/menu/component/addMenu.vue
*/
export async function setBackEndControlRefreshRoutes() {
await getBackEndControlRoutes();
}
/**
* 后端路由 component 转换
* @param routes 后端返回的路由表数组
* @returns 返回处理成函数后的 component
*/
export function backEndComponent(routes: any) {
if (!routes) return;
return routes.map((item: any) => {
if (item.path && item.path.startsWith('http')) {
if (item.meta.isIframe) {
item.component = () => import('/@/layout/routerView/iframes.vue');
} else {
item.component = () => import('/@/layout/routerView/link.vue');
}
item.path = '/iframes/' + window.btoa(item.path);
} else if (item.componentPath) { // 支持动态路径 /a/1 ==> /a ; /b/1 ==> /b
item.component = dynamicImport(dynamicViewsModules, item.componentPath);
} else {
item.component = dynamicImport(dynamicViewsModules, item.path);
}
item.children && backEndComponent(item.children);
if (item.children) {
item.redirect = item.children[0].path;
}
return item;
});
}
/**
* 后端路由 component 转换函数
* @param dynamicViewsModules 获取目录下的 .vue、.tsx 全部文件
* @param component 当前要处理项 component
* @returns 返回处理成函数后的 component
*/
export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
const keys = Object.keys(dynamicViewsModules);
const matchKeys = keys.filter((key) => {
const k = key.replace(/..\/views|../, '');
return k.startsWith(`${component}.vue`);
});
if (matchKeys?.length === 1) {
const matchKey = matchKeys[0];
return dynamicViewsModules[matchKey];
}
if (matchKeys?.length > 1) {
return false;
}
}

150
src/router/frontEnd.ts Normal file
View File

@@ -0,0 +1,150 @@
import { RouteRecordRaw } from 'vue-router';
import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
import { baseRoutes, notFoundAndNoPower } from '/@/router/route';
import pinia from '/@/stores/index';
import { Session } from '/@/utils/storage';
import { useUserInfo } from '/@/stores/userInfo';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useRoutesList } from '/@/stores/routesList';
import { NextLoading } from '/@/utils/loading';
// 前端控制路由
/**
* 前端控制路由:初始化方法,防止刷新时路由丢失
* @method NextLoading 界面 loading 动画开始执行
* @method useUserInfo(pinia).setUserInfos() 触发初始化用户信息 pinia
* @method setAddRoute 添加动态路由
* @method setFilterMenuAndCacheTagsViewRoutes 设置递归过滤有权限的路由到 pinia routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组
*/
export async function initFrontEndControlRoutes() {
// 界面 loading 动画开始执行
if (window.nextLoading === undefined) NextLoading.start();
// 无 token 停止执行下一步
if (!Session.getToken()) return false;
// 触发初始化用户信息 pinia
await useUserInfo(pinia).setUserInfos();
// 无登录权限时,添加判断
if (useUserInfo().userInfos.roles.length <= 0) return Promise.resolve(true);
// 添加动态路由
await setAddRoute();
// 设置递归过滤有权限的路由到 pinia routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组
await setFilterMenuAndCacheTagsViewRoutes();
}
/**
* 添加动态路由
* @method router.addRoute
* @description 此处循环为 baseRoutes/@/router/route第一个顶级 children 的路由一维数组,非多级嵌套
* @link 参考https://next.router.vuejs.org/zh/api/#addroute
*/
export async function setAddRoute() {
await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
router.addRoute(route);
});
}
/**
* 删除/重置路由
* @method router.removeRoute
* @description 此处循环为 baseRoutes/@/router/route第一个顶级 children 的路由一维数组,非多级嵌套
* @link 参考https://next.router.vuejs.org/zh/api/#push
*/
export async function frontEndsResetRoute() {
await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
const routeName: any = route.name;
router.hasRoute(routeName) && router.removeRoute(routeName);
});
}
/**
* 获取有当前用户权限标识的路由数组,进行对原路由的替换
* @description 替换 baseRoutes/@/router/route第一个顶级 children 的路由
* @returns 返回替换后的路由数组
*/
export function setFilterRouteEnd() {
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(baseRoutes));
// notFoundAndNoPower 防止 404、401 不在 layout 布局中不设置的话404、401 界面将全屏显示
// 关联问题 No match found for location with path 'xxx'
filterRouteEnd[0].children = [...setFilterRoute(filterRouteEnd[0].children), ...notFoundAndNoPower];
return filterRouteEnd;
}
/**
* 获取当前用户权限标识去比对路由表(未处理成多级嵌套路由)
* @description 这里主要用于动态路由的添加router.addRoute
* @link 参考https://next.router.vuejs.org/zh/api/#addroute
* @param chil baseRoutes/@/router/route第一个顶级 children 的下路由集合
* @returns 返回有当前用户权限标识的路由数组
*/
export function setFilterRoute(chil: any) {
const stores = useUserInfo(pinia);
const { userInfos } = storeToRefs(stores);
let filterRoute: any = [];
chil.forEach((route: any) => {
if (route.meta.roles) {
route.meta.roles.forEach((metaRoles: any) => {
userInfos.value.roles.forEach((roles: any) => {
if (metaRoles === roles) filterRoute.push({ ...route });
});
});
}
});
return filterRoute;
}
/**
* 缓存多级嵌套数组处理后的一维数组
* @description 用于 tagsView、菜单搜索中未过滤隐藏的(isHide)
*/
export function setCacheTagsViewRoutes() {
// 获取有权限的路由,否则 tagsView、菜单搜索中无权限的路由也将显示
const stores = useUserInfo(pinia);
const storesTagsView = useTagsViewRoutes(pinia);
const { userInfos } = storeToRefs(stores);
let rolesRoutes = setFilterHasRolesMenu(baseRoutes, userInfos.value.roles);
// 添加到 pinia setTagsViewRoutes 中
storesTagsView.setTagsViewRoutes(formatTwoStageRoutes(formatFlatteningRoutes(rolesRoutes))[0].children);
}
/**
* 设置递归过滤有权限的路由到 pinia routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组
* @description 用于左侧菜单、横向菜单的显示
* @description 用于 tagsView、菜单搜索中未过滤隐藏的(isHide)
*/
export function setFilterMenuAndCacheTagsViewRoutes() {
const stores = useUserInfo(pinia);
const storesRoutesList = useRoutesList(pinia);
const { userInfos } = storeToRefs(stores);
storesRoutesList.setRoutesList(setFilterHasRolesMenu(baseRoutes[0].children, userInfos.value.roles));
setCacheTagsViewRoutes();
}
/**
* 判断路由 `meta.roles` 中是否包含当前登录用户权限字段
* @param roles 用户权限标识,在 userInfos用户信息的 roles登录页登录时缓存到浏览器数组
* @param route 当前循环时的路由项
* @returns 返回对比后有权限的路由项
*/
export function hasRoles(roles: any, route: any) {
if (route.meta && route.meta.roles) return roles.some((role: any) => route.meta.roles.includes(role));
else return true;
}
/**
* 获取当前用户权限标识去比对路由表,设置递归过滤有权限的路由
* @param routes 当前路由 children
* @param roles 用户权限标识,在 userInfos用户信息的 roles登录页登录时缓存到浏览器数组
* @returns 返回有权限的路由数组 `meta.roles` 中控制
*/
export function setFilterHasRolesMenu(routes: any, roles: any) {
const menu: any = [];
routes.forEach((route: any) => {
const item = { ...route };
if (hasRoles(roles, item)) {
if (item.children) item.children = setFilterHasRolesMenu(item.children, roles);
menu.push(item);
}
});
return menu;
}

131
src/router/index.ts Normal file
View File

@@ -0,0 +1,131 @@
import { createRouter, createWebHashHistory } from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import pinia from '/@/stores/index';
import { storeToRefs } from 'pinia';
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
import { useRoutesList } from '/@/stores/routesList';
import { Session } from '/@/utils/storage';
import { staticRoutes, notFoundAndNoPower } from '/@/router/route';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { flowConfig } from "/@/flow/designer/config/flow-config";
import { replaceRouterRoute } from "/@/flow/support/extend";
/**
* 1、前端控制路由时isRequestRoutes 为 false需要写 roles需要走 setFilterRoute 方法。
* 2、后端控制路由时isRequestRoutes 为 true不需要写 roles不需要走 setFilterRoute 方法),
* 相关方法已拆解到对应的 `backEnd.ts` 与 `frontEnd.ts`(他们互不影响,不需要同时改 2 个文件)。
* 特别说明:
* 1、前端控制路由菜单由前端去写无菜单管理界面有角色管理界面角色管理中有 roles 属性,需返回到 userInfo 中。
* 2、后端控制路由菜单由后端返回有菜单管理界面、有角色管理界面
*/
/**
* 创建一个可以被 Vue 应用程序使用的路由实例
* @method createRouter(options: RouterOptions): Router
* @link 参考https://next.router.vuejs.org/zh/api/#createrouter
*/
export const router = createRouter({
history: createWebHashHistory(),
/**
* 说明:
* 1、notFoundAndNoPower 默认添加 404、401 界面,防止一直提示 No match found for location with path 'xxx'
* 2、backEnd.ts(后端控制路由)、frontEnd.ts(前端控制路由) 中也需要加 notFoundAndNoPower 404、401 界面。
* 防止 404、401 不在 layout 布局中不设置的话404、401 界面将全屏显示
*/
routes: [...notFoundAndNoPower, ...staticRoutes],
});
/**
* 路由多级嵌套数组处理成一维数组
* @param arr 传入路由菜单数据数组
* @returns 返回处理后的一维路由菜单数组
*/
export function formatFlatteningRoutes(arr: any) {
if (arr.length <= 0) return false;
for (let i = 0; i < arr.length; i++) {
if (arr[i].children) {
arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
}
}
return arr;
}
/**
* 一维数组处理成多级嵌套数组只保留二级也就是二级以上全部处理成只有二级keep-alive 支持二级缓存)
* @description isKeepAlive 处理 `name` 值,进行缓存。顶级关闭,全部不缓存
* @link 参考https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
* @param arr 处理后的一维路由菜单数组
* @returns 返回将一维数组重新处理成 `定义动态路由baseRoutes` 的格式
*/
export function formatTwoStageRoutes(arr: any) {
if (arr.length <= 0) return false;
const newArr: any = [];
const cacheList: Array<string> = [];
arr.forEach((v: any) => {
if (v.path === '/') {
newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
} else {
// 判断是否是动态路由xx/:id/:name用于 tagsView 等中使用
if (v.path.indexOf('/:') > -1) {
v.meta['isDynamic'] = true;
v.meta['isDynamicPath'] = v.path;
}
newArr[0].children.push({ ...v });
// 存 name 值keep-alive 中 include 使用,实现路由的缓存
// 路径:/@/layout/routerView/parent.vue
if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) {
cacheList.push(v.name);
const stores = useKeepALiveNames(pinia);
stores.setCacheKeepAlive(cacheList);
}
}
});
return newArr;
}
// 路由加载前
router.beforeEach(async (to, from, next) => {
NProgress.configure({ showSpinner: false });
if (to.name) NProgress.start();
const token = Session.getToken();
if (to.meta.isAuth !== undefined && !to.meta.isAuth) {
next();
NProgress.done();
} else if (to.fullPath.indexOf(flowConfig.mobileConfig.mobilePrefix) !== -1) {
await replaceRouterRoute(to, router)
next();
NProgress.done();
}/* else if (to.fullPath.indexOf(staticRoutesFlow[0].path) !== -1) {
await replaceRouterThirdRoute(to, router)
next();
NProgress.done();
}*/ else {
if (!token) {
next(`/login?redirect=${to.path}&params=${JSON.stringify(to.query ? to.query : to.params)}`);
Session.clear();
NProgress.done();
} else if (token && to.path === '/login') {
next('/home');
NProgress.done();
} else {
const storesRoutesList = useRoutesList(pinia);
const { routesList } = storeToRefs(storesRoutesList);
if (routesList.value.length === 0) {
// 后端控制路由:路由数据初始化,防止刷新时丢失
await initBackEndControlRoutes();
next({ path: to.path, query: to.query });
} else {
next();
}
}
}
});
// 路由加载后
router.afterEach(() => {
NProgress.done();
});
// 导出路由
export default router;

133
src/router/route.ts Normal file
View File

@@ -0,0 +1,133 @@
import { RouteRecordRaw } from 'vue-router';
import {dynamicRoutesFlow, staticRoutesFlow} from "/@/flow/support/extend";
/**
* 建议:路由 path 路径与文件夹名称相同,找文件可浏览器地址找,方便定位文件位置
*
* 路由meta对象参数说明
* meta: {
* title: 菜单栏及 tagsView 栏、菜单搜索名称(国际化)
* isLink 是否超链接菜单,开启外链条件,`1、isLink: 链接地址不为空 2、isIframe:false`
* isHide 是否隐藏此路由
* isKeepAlive 是否缓存组件状态
* isAuth: 是否需要认证才能进入的页面
* isAffix 是否固定在 tagsView 栏上
* isIframe 是否内嵌窗口,开启条件,`1、isIframe:true 2、isLink链接地址不为空`
* roles 当前路由权限标识取角色管理。控制路由显示、隐藏。超级管理员admin 普通角色common
* icon 菜单、tagsView 图标,阿里:加 `iconfont xxx`fontawesome加 `fa xxx`
* }
*/
// 扩展 RouteMeta 接口
declare module 'vue-router' {
interface RouteMeta {
isLink?: string;
isHide?: boolean;
isAuth?: boolean;
isKeepAlive?: boolean;
isAffix?: boolean;
isIframe?: boolean;
roles?: string[];
icon?: string;
}
}
/**
* 定义静态路由(默认路由)
* 前端添加路由,请在此处加
*/
export const dynamicRoutes: Array<RouteRecordRaw> = [
{
path: '/home',
name: 'router.home',
component: () => import('/@/views/home/index.vue'),
meta: {
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: true,
isIframe: false,
icon: 'iconfont icon-shouye',
},
},
{
path: '/personal',
name: 'router.personal',
component: () => import('/@/views/admin/system/user/personal.vue'),
meta: {
isHide: true,
},
},
...dynamicRoutesFlow
];
/**
* 定义静态路由(默认路由)
*/
export const staticRoutes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'staticRoutes.login',
component: () => import('/@/views/login/index.vue'),
meta: {
isAuth: false,
},
},
{
path: '/authredirect',
name: 'staticRoutes.authredirect',
component: () => import('/@/views/login/component/authredirect.vue'),
meta: {
isAuth: false,
},
},
{
path: '/aiFlow/process/:id',
name: 'AI 流程编排',
component: () => import('/@/views/knowledge/aiFlow/index.vue'),
meta: {
isAuth: true,
},
},
...staticRoutesFlow
];
/**
* 定义404、401界面
*/
export const notFoundAndNoPower = [
{
path: '/:path(.*)*',
name: 'staticRoutes.notFound',
component: () => import('/@/views/error/404.vue'),
meta: {
isHide: true,
},
},
{
path: '/401',
name: 'staticRoutes.noPower',
component: () => import('/@/views/error/401.vue'),
meta: {
isHide: true,
},
},
];
/**
* 基础性路由
*
* 所有节点都是挂载此节点下
*/
export const baseRoutes: Array<RouteRecordRaw> = [
{
path: '/',
name: '/',
component: () => import('/@/layout/index.vue'),
redirect: '/home',
meta: {
isKeepAlive: true,
},
children: [],
},
];