fix: 动态路由 初步调试成功

src/api/system/menu.ts

@@ -1,21 +1,36 @@
 import request from '@/utils/request'
 import { AxiosPromise } from 'axios'
-import { devAllRouters } from '@/router'
+import { local_permissionsRoutes } from '@/router'
 
 /**
  * 获取路由列表
  */
 export function listRoutes(): AxiosPromise {
-	const isRequestAsyncRoutes = true // import.meta.env.VITE_APP_USE_LOCAL_ROUTES === '1'
+	const isRequestAsyncRoutes = import.meta.env.VITE_APP_USE_LOCAL_ROUTES === '1'
 	// 请求本地路由配置
 	if (isRequestAsyncRoutes) {
 		// eslint-disable-next-line
 		// @ts-ignore
-		return Promise.resolve(devAllRouters)
+		return Promise.resolve({
+			// 路由菜单
+			menu: local_permissionsRoutes,
+			// 权限
+			permissions: ['']
+		})
 	}
 	return request({
-		url: '/index/menu',
+		url: '/sys/resource/list-menu-permissions',
 		method: 'get',
 		extraConfig: { showFullscreenLoading: true }
-	})
+	}) /*.then(res => {
+		console.error(JSON.stringify(res), 'res...')
+		// res['menu'] = [res.menu[0]/!*, res.menu[1]*!/]
+		return res
+		// return Promise.resolve({
+		// 	// 路由菜单
+		// 	menu: local_permissionsRoutes,
+		// 	// 权限
+		// 	permissions: ['']
+		// })
+	})*/
 }

src/api/system/user.ts

@@ -75,12 +75,23 @@ function userRoleIdsApi(data: any): AxiosPromise {
 	})
 }
 
+/**
+ * 用户信息
+ */
+export function userGetApi(id: string): AxiosPromise {
+	return request({
+		url: `/sys/user/get?id=${id}`,
+		method: 'get'
+	})
+}
+
 const user = {
 	userPageApi,
 	userAddOrEditSaveApi,
 	userDeleteApi,
 	userResetPasswordApi,
 	userAssignRolesApi,
-	userRoleIdsApi
+	userRoleIdsApi,
+	userGetApi
 }
 export default user

src/router/index.ts

@@ -6,6 +6,18 @@ export const Layout = () => import('@/layout/index.vue')
 
 // 参数说明: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 // 静态路由
+type RouteMeta = {
+	// 标题
+	title?: string
+	// 图标
+	icon?: string
+	// 是否固定
+	affix?: true
+	// 是否在菜单列表进行隐藏
+	hidden?: boolean
+	// // 类型
+	// type: string;
+}
 export const constantRoutes: Array<AppRouteRecordRaw> = [
 	{
 		path: '/redirect',
@@ -33,6 +45,7 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 		component: () => import('@/views/error-page/401.vue'),
 		meta: { hidden: true }
 	},
+	// 首页
 	{
 		path: '/',
 		component: Layout,
@@ -46,6 +59,7 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 			}
 		]
 	},
+	// 组件示例
 	{
 		path: '/components',
 		component: Layout,
@@ -59,6 +73,7 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 			}
 		]
 	},
+	// 表单示例
 	{
 		path: '/form',
 		component: Layout,
@@ -73,6 +88,7 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 			}
 		]
 	},
+	// 列表示例
 	{
 		path: '/table',
 		component: Layout,
@@ -124,7 +140,7 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 		]
 	},
 	// 仅用于研发测试 START
-	{
+	/*{
 		path: '/test',
 		component: Layout,
 		// meta: {hidden: true, title: 'test', icon: 'system'},
@@ -144,58 +160,7 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 				meta: { title: '组件通信方式' }
 			}
 		]
-	},
-	{
-		path: '/flow',
-		component: Layout,
-		meta: { title: '流程管理', icon: 'guide' },
-		redirect: '/flow/group',
-		children: [
-			{
-				path: 'group1',
-				component: () => import('@/views/flow/group/index1.vue'),
-				name: 'group1',
-				meta: { title: '流程组', icon: '' }
-			},
-			{
-				path: 'group',
-				component: () => import('@/views/flow/group/index.vue'),
-				name: 'group',
-				meta: { title: '流程组 - ui调整', icon: '' }
-			},
-			{
-				path: 'form',
-				component: () => import('@/views/flow/form/index.vue'),
-				name: 'form',
-				meta: { title: '流程表单', icon: '' }
-			},
-			{
-				path: 'create',
-				component: () => import('@/views/flow/create/index.vue'),
-				name: 'create',
-				meta: { title: '创建流程', icon: '' }
-			},
-			{
-				path: 'task',
-				component: () => import('@/views/flow/task/index.vue'),
-				name: 'task',
-				meta: { title: '流程任务', icon: '' }
-			},
-			{
-				path: 'instance',
-				component: () => import('@/views/flow/instance/index.vue'),
-				name: 'instance',
-				meta: { title: '流程实例', icon: '' }
-			},
-			{
-				path: 'modal',
-				component: () => import('@/views/flow/modal/index.vue'),
-				name: 'modal',
-				meta: { title: '流程模型', icon: '' }
-			}
-		]
-	},
-	// 仅用于研发测试 END
+	},*/
 	{
 		path: '/setting',
 		component: Layout,
@@ -257,9 +222,10 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 				meta: { title: '菜单管理', icon: '' }
 			}
 		]
-	},
+	}
+	// 仅用于研发测试 END
 	// 外部链接
-	{
+	/*{
 		path: '/external-link',
 		component: Layout,
 		children: [
@@ -268,7 +234,7 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 				meta: { title: '外部链接', icon: 'link' }
 			}
 		]
-	}
+	}*/
 ]
 
 export const noFoundRouters = [
@@ -281,11 +247,11 @@ export const noFoundRouters = [
 ]
 
 /**
- * devAllRouters: 每次有新的路由配置 请做好标注!!!
+ * local_permissionsRoutes: 本地存储带权限路由 每次有新的路由配置 请做好标注!!!
  * 本地 dev 调试 默认使用本地路由数据
  * (若想要调试 接口数据 请在 env.development.local 修改 VITE_APP_USE_LOCAL_ROUTES 不为 1即可)
  */
-export const devAllRouters: Array<AppRouteRecordRaw> = [
+export const local_permissionsRoutes: Array<AppRouteRecordRaw> = [
 	{
 		// demo演示
 		path: '/demo',
@@ -308,9 +274,67 @@ export const devAllRouters: Array<AppRouteRecordRaw> = [
 				meta: { title: 'demo_adminManage' }
 			}
 		]
-	}
-
+	},
 	// todo 请添加相关新路由描述
+	// 流程管理 权限
+	{
+		path: '/flow',
+		// component: Layout,
+		component: '',
+		meta: { title: '流程管理', icon: 'guide' },
+		redirect: '/flow/group',
+		children: [
+			{
+				path: 'group1',
+				// component: () => import('@/views/flow/group/index1.vue'),
+				component: 'flow/group/index1',
+				name: 'flow_group1',
+				meta: { title: '流程组', icon: '' }
+			},
+			{
+				path: 'group',
+				// component: () => import('@/views/flow/group/index.vue'),
+				component: 'flow/group/index',
+				name: 'flow_group',
+				meta: { title: '流程组 - ui调整', icon: '' }
+			},
+			{
+				path: 'form',
+				// component: () => import('@/views/flow/form/index.vue'),
+				component: 'flow/form/index',
+				name: 'flow_form',
+				meta: { title: '流程表单', icon: '' }
+			},
+			{
+				path: 'create',
+				// component: () => import('@/views/flow/create/index.vue'),
+				component: 'flow/create/index',
+				name: 'flow_create',
+				meta: { title: '创建流程', icon: '' }
+			},
+			{
+				path: 'task',
+				// component: () => import('@/views/flow/task/index.vue'),
+				component: 'flow/task/index',
+				name: 'flow_task',
+				meta: { title: '流程任务', icon: '' }
+			},
+			{
+				path: 'instance',
+				// component: () => import('@/views/flow/instance/index.vue'),
+				component: 'flow/instance/index',
+				name: 'flow_instance',
+				meta: { title: '流程实例', icon: '' }
+			},
+			{
+				path: 'modal',
+				// component: () => import('@/views/flow/modal/index.vue'),
+				component: 'flow/modal/index',
+				name: 'flow_modal',
+				meta: { title: '流程模型', icon: '' }
+			}
+		]
+	}
 ]
 
 // 创建路由

src/store/modules/permission.ts

@@ -26,27 +26,38 @@ export const filterAsyncRoutes = (routes: AppRouteRecordRaw[], roles: string[])
 	const res: AppRouteRecordRaw[] = []
 	routes.forEach(route => {
 		const tmp = { ...route } as any
+		tmp.meta = tmp.meta ? tmp.meta : {}
 		// if (hasPermission(roles, tmp)) {
 		// todo be delete
 		// }
 		// 特殊Layout 配置 标识
-		if (tmp.component == 'Layout') {
+		if (!tmp.component || tmp.component === 'Layout') {
 			tmp.component = Layout
 		} else {
 			const component = modules[`/src/views/${tmp.component}.vue`] as any
+			console.error(component, 'component....')
 			if (component) {
 				tmp.component = component
 			} else {
 				tmp.component = modules[`/src/views/error-page/404.vue`]
 			}
 		}
-		res.push(tmp)
+		/*if (tmp.component) {
+			const component = modules[`/src/views/${tmp.component}.vue`] as any
+			if (component) {
+				tmp.component = component
+			} else {
+				tmp.component = modules[`/src/views/error-page/404.vue`]
+			}
+		}*/
+		tmp.path && res.push(tmp)
 
 		// 递归
 		if (tmp.children) {
 			tmp.children = filterAsyncRoutes(tmp.children, roles)
 		}
 	})
+	// console.log(res, 'res........')
 	return res
 }
 
@@ -63,7 +74,12 @@ const usePermissionStore = defineStore({
 		},
 		generateRoutes(roles: string[]) {
 			return listRoutes().then((data: any) => {
-				const accessedRoutes = filterAsyncRoutes(data, roles)
+				// 过滤掉顶级菜单组 没有/path 的数据(避免报错)
+				const accessedRoutes = filterAsyncRoutes(
+					data.menu.filter((v: any) => /\/.*/.test(v.path)),
+					roles
+				)
+				// console.error(accessedRoutes, 'accessedRoutes')
 				this.setRoutes(accessedRoutes)
 				return accessedRoutes
 			})

src/store/modules/user.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { UserState } from '@/types'
 import { ls } from '@/utils'
 import { login, logout } from '@/api/login'
+import { userGetApi } from '@/api/system/user.ts'
 import router, { resetRouter } from '@/router'
 import md5 from 'js-md5'
 
@@ -54,6 +55,9 @@ const useUserStore = defineStore({
 			getMenuPermissions().then(res => {
 				console.error(res, 'res.......')
 			})*/
+			userGetApi(this.userInfo.userId).then(res => {
+				console.error(res, 'res.......')
+			})
 			return new Promise(resolve => {
 				console.log('fetch 获取用户信息')
 				this.isLogin = true // user/get

src/views/error-page/404.vue

@@ -11,7 +11,7 @@
 				<div class="bullshit__oops">OOPS!</div>
 				<div class="bullshit__headline">{{ info.message }}</div>
 				<div class="bullshit__info">{{ info.desc }}</div>
-				<span @click="$router.push('/')" class="bullshit__return-home">{{ info.btn }}</span>
+				<span class="bullshit__return-home" @click="$router.push('/')">{{ info.btn }}</span>
 			</div>
 		</div>
 	</div>