admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔱: [client] sync upgrade with 21 commits [trident-sync]

Browse Source 
'admin-22.12.12:发布v2.4.21版本，具体更新内容查看CHANGELOG.md'
!42 修复 工作流无法添加新节点问题
Merge pull request !42 from beta/bugfix_workflow
修复 工作流无法添加新节点问题

1. 修复 工作流无法添加新节点问题
2. 修复 左侧导航无法隐藏问题
'admin-22.12.09:发布v2.4.2版本，具体更新内容查看CHANGELOG.md'
!41 修复get请求传递嵌套对象或数组时无法正常编码问题
Merge pull request !41 from 随心/master
!40 开启TagsView缓存后，刷新后所有的路由都变成组件缓存了
Merge pull request !40 from mrjimin/master
修复get请求传递嵌套对象或数组时无法正常编码问题
update src/layout/routerView/parent.vue.

Signed-off-by: mrjimin <z8888788@163.com>
update src/layout/routerView/parent.vue.
这里应该拿到的是已经设置开启组件缓存的路由，而不是全部，需要先判断item.meta.isKeepAlive

Signed-off-by: mrjimin <z8888788@163.com>
'admin-22.11.30:发布v2.4.1版本，具体更新内容查看CHANGELOG.md'
Merge branch 'master' of https://gitee.com/lyt-top/vue-next-admin
'admin-22.11.30:删除v2.4.0版本不需要的依赖'
update src/views/error/404.vue.

Signed-off-by: lyt-Top <1105290566@qq.com>
update src/components/table/index.vue.

Signed-off-by: lyt-Top <1105290566@qq.com>
'admin-22.11.30:修改v2.4.0文字说明'
'admin-22.11.30:修改v2.4.0文字说明'
'admin-22.11.29:发布v2.4.0版本，具体更新内容查看CHANGELOG.md'
'admin-22.11.19:修复v2.3.0版本动态路由事件调用关闭当前tagsview、普通路由刷新界面参数丢失问题'
'admin-22.11.18:优化v2.3.0版本tagsview风格5兼容火狐'
'admin-22.11.17:优化v2.3.0版本iframe右键菜单刷新问题'
...
This commit is contained in:
H0nGzA1
2023-02-13 00:17:30 +08:00
parent 8e5fba2532
commit 80323dd641
228 changed files with 35680 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
web/src/router/backEnd.ts Normal file
View File

@@ -0,0 +1,162 @@
import { RouteRecordRaw } from 'vue-router';
import { storeToRefs } from 'pinia';
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 { dynamicRoutes, notFoundAndNoPower } from '/@/router/route';
import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
import { useRoutesList } from '/@/stores/routesList';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useMenuApi } from '/@/api/menu/index';
// 后端控制路由
// 引入 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.get('token')) return false;
// 触发初始化用户信息 pinia
// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
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），替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
dynamicRoutes[0].children = 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(dynamicRoutes[0].children as any);
setCacheTagsViewRoutes();
}
/**
* 缓存多级嵌套数组处理后的一维数组
* @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
*/
export function setCacheTagsViewRoutes() {
const storesTagsView = useTagsViewRoutes(pinia);
storesTagsView.setTagsViewRoutes(formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children);
}
/**
* 处理路由格式及添加捕获所有路由或 404 Not found 路由
* @description 替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
* @returns 返回替换后的路由数组
*/
export function setFilterRouteEnd() {
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
// 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 此处循环为 dynamicRoutes（/@/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() {
// 模拟 admin 与 test
const stores = useUserInfo(pinia);
const { userInfos } = storeToRefs(stores);
const auth = userInfos.value.roles[0];
// 管理员 admin
if (auth === 'admin') return menuApi.getAdminMenu();
// 其它用户 test
else return menuApi.getTestMenu();
}
/**
* 重新请求后端路由菜单接口
* @description 用于菜单管理界面刷新菜单（未进行测试）
* @description 路径：/src/views/system/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.component) item.component = dynamicImport(dynamicViewsModules, item.component as string);
item.children && backEndComponent(item.children);
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}`) || k.startsWith(`/${component}`);
});
if (matchKeys?.length === 1) {
const matchKey = matchKeys[0];
return dynamicViewsModules[matchKey];
}
if (matchKeys?.length > 1) {
return false;
}
}

153
web/src/router/frontEnd.ts Normal file
View File

@@ -0,0 +1,153 @@
import { RouteRecordRaw } from 'vue-router';
import { storeToRefs } from 'pinia';
import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
import { dynamicRoutes, 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.get('token')) return false;
// 触发初始化用户信息 pinia
// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
await useUserInfo(pinia).setUserInfos();
// 无登录权限时，添加判断
// https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO
if (useUserInfo().userInfos.roles.length <= 0) return Promise.resolve(true);
// 添加动态路由
await setAddRoute();
// 设置递归过滤有权限的路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
await setFilterMenuAndCacheTagsViewRoutes();
}
/**
* 添加动态路由
* @method router.addRoute
* @description 此处循环为 dynamicRoutes（/@/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 此处循环为 dynamicRoutes（/@/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 替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
* @returns 返回替换后的路由数组
*/
export function setFilterRouteEnd() {
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
// 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 dynamicRoutes（/@/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(dynamicRoutes, 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(dynamicRoutes[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;
}

137
web/src/router/index.ts Normal file
View File

@@ -0,0 +1,137 @@
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 { useThemeConfig } from '/@/stores/themeConfig';
import { Session } from '/@/utils/storage';
import { staticRoutes, notFoundAndNoPower } from '/@/router/route';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
/**
* 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。
* 2、后端控制路由时：isRequestRoutes 为 true，不需要写 roles，不需要走 setFilterRoute 方法），
* 相关方法已拆解到对应的 `backEnd.ts` 与 `frontEnd.ts`（他们互不影响，不需要同时改 2 个文件）。
* 特别说明：
* 1、前端控制：路由菜单由前端去写（无菜单管理界面，有角色管理界面），角色管理中有 roles 属性，需返回到 userInfo 中。
* 2、后端控制：路由菜单由后端返回（有菜单管理界面、有角色管理界面）
*/
// 读取 `/src/stores/themeConfig.ts` 是否开启后端控制路由配置
const storesThemeConfig = useThemeConfig(pinia);
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isRequestRoutes } = themeConfig.value;
/**
* 创建一个可以被 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 返回将一维数组重新处理成 `定义动态路由（dynamicRoutes）` 的格式
*/
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 等中使用
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
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.meta.title) NProgress.start();
const token = Session.get('token');
if (to.path === '/login' && !token) {
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) {
if (isRequestRoutes) {
// 后端控制路由：路由数据初始化，防止刷新时丢失
await initBackEndControlRoutes();
// 解决刷新时，一直跳 404 页面问题，关联问题 No match found for location with path 'xxx'
// to.query 防止页面刷新时，普通路由带参数时，参数丢失。动态路由（xxx/:id/:name"）isDynamic 无需处理
next({ path: to.path, query: to.query });
} else {
// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
await initFrontEndControlRoutes();
next({ path: to.path, query: to.query });
}
} else {
next();
}
}
}
});
// 路由加载后
router.afterEach(() => {
NProgress.done();
});
// 导出路由
export default router;

1246
web/src/router/route.ts Normal file
View File

File diff suppressed because it is too large Load Diff