From b465cc7150a1d0436117c5ed276bd3bdcaed7e87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=A2=E6=B5=A9=E4=B8=9C?= <975115611@qq.com> Date: Wed, 25 Dec 2024 16:48:26 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(system):=20=E6=96=B0=E5=A2=9E=E8=A7=92?= =?UTF-8?q?=E8=89=B2=E8=B5=84=E6=BA=90=E5=88=86=E9=85=8D=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在角色管理页面添加分配资源对话框 - 实现角色资源分配的相关逻辑和接口 - 优化角色列表的显示样式 - 更新菜单数据获取方式，存储到全局状态 --- src/home.vue | 8 +- src/pages/systemSetting/roleManagement.vue | 92 ++++++++++++++++------ src/router/index.js | 3 +- src/stortes/menu.js | 8 +- src/utils/request.js | 6 +- 5 files changed, 88 insertions(+), 29 deletions(-) diff --git a/src/home.vue b/src/home.vue index 11a79fa..5bf83f6 100644 --- a/src/home.vue +++ b/src/home.vue @@ -61,7 +61,7 @@ const router = useRouter(); const { proxy } = getCurrentInstance(); const menuInfoStore = menuStore(); const userStore = useUserInfoStore(); -const { activeTabArray, editableTabsValue } = storeToRefs(menuInfoStore); // 响应式 +const { activeTabArray, editableTabsValue, allArray } = storeToRefs(menuInfoStore); // 响应式 const { userInfo } = storeToRefs(userStore); const userData = ref(null); const breadList = ref([]); @@ -235,8 +235,10 @@ onMounted(async () => { document.addEventListener('click', handleClickOutside); getMatched(); try { - const res = await proxy.$api.menus(); - userData.value = res.data; + userData.value = allArray.value; + return; + // const res = await proxy.$api.menus(); + // userData.value = res.data; getscoket(); } catch (error) { console.error('失败信息:', error); diff --git a/src/pages/systemSetting/roleManagement.vue b/src/pages/systemSetting/roleManagement.vue index 052e328..663b9b9 100644 --- a/src/pages/systemSetting/roleManagement.vue +++ b/src/pages/systemSetting/roleManagement.vue @@ -7,13 +7,13 @@ - + - + - - + + + + 父子联动 + + + + + + + @@ -134,16 +185,13 @@ onMounted(() => { cursor: pointer; } .iconS { - .el-icon-check { - color: #00ff00; - font-weight: 800; - font-size: 20px; - } + font-size: 22px; +} +.el-icon-check { + color: #00ff00; +} - .el-icon-close { - color: #ff0000; - font-weight: 800; - font-size: 20px; - } +.el-icon-close { + color: #ff0000; } diff --git a/src/router/index.js b/src/router/index.js index 87c405b..fa8a97e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -73,7 +73,8 @@ const setupDynamicRoutes = async () => { try { const res = await api.menus(); const backendRoutes = res.data; - // const useMenuStores = useMenuStore(); + const useMenuStores = useMenuStore(); + useMenuStores.getAllMenu(backendRoutes); // useMenuStores.changeRemoveAll(); // 转换路由 diff --git a/src/stortes/menu.js b/src/stortes/menu.js index ea3e89b..e94efd7 100644 --- a/src/stortes/menu.js +++ b/src/stortes/menu.js @@ -10,9 +10,15 @@ const menuStore = defineStore('menu', { }, ], editableTabsValue: '/index', + allArray: [], }), // 修改 actions: { + // 获取所有菜单 + getAllMenu(val) { + this.allArray = val; + return val; + }, /** * 添加一个新的菜单项到活跃菜单数组中。 * 如果新菜单项的URL已经存在于活跃菜单数组中，则不执行任何操作。 @@ -88,4 +94,4 @@ const menuStore = defineStore('menu', { }, }); -export default menuStore; \ No newline at end of file +export default menuStore; diff --git a/src/utils/request.js b/src/utils/request.js index d184865..ed00fd2 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -210,11 +210,13 @@ export default { detailRoles(params) { return oGet(baseUrl + '/role/detail', params); }, + + // 给角色分配菜单 assignMenusToRole(params) { - return oGet(baseUrl + '/role/assignMenusToRole', params); + return oPost(baseUrl + '/role/assignMenusToRole', params); }, getRoleMenus(params) { - return oPost(baseUrl + '/role/getRoleMenus', params); + return oGet(baseUrl + '/role/getRoleMenus', params); }, }; -- Gitee From 640d02ea2135ddbe129ad1413899f563322e7ac9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=A2=E6=B5=A9=E4=B8=9C?= <975115611@qq.com> Date: Wed, 25 Dec 2024 18:04:37 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(router):=20=E6=B7=BB=E5=8A=A0=20404=20?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B9=B6=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 404.vue 页面组件，用于显示页面不存在的情况 - 在路由配置中添加 404 路由和 catch-all 路由 - 优化了动态路由加载逻辑，确保无效路由能正确重定向到 404 页面 - 调整了登录相关逻辑，提取公共功能到单独的函数中 --- src/main.js | 2 +- src/pages/404.vue | 9 +++++++++ src/router/index.js | 30 ++++++++++++++++++++---------- 3 files changed, 30 insertions(+), 11 deletions(-) create mode 100644 src/pages/404.vue diff --git a/src/main.js b/src/main.js index a2d99aa..e965674 100644 --- a/src/main.js +++ b/src/main.js @@ -13,7 +13,7 @@ const app = createApp(App); app.config.globalProperties.$api = axios; app.config.globalProperties.$icon = ElementPlusIconsVue; // size: 'small', -app.use(pinia).use(router).use(ElementPlus, { locale: zhCn, zIndex: 3000 }); +app.use(router).use(pinia).use(ElementPlus, { locale: zhCn, zIndex: 3000 }); for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); } diff --git a/src/pages/404.vue b/src/pages/404.vue new file mode 100644 index 0000000..f59f580 --- /dev/null +++ b/src/pages/404.vue @@ -0,0 +1,9 @@ + diff --git a/src/router/index.js b/src/router/index.js index fa8a97e..fb4acb1 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -37,6 +37,12 @@ const router = createRouter({ ], }, { + name: '404', + path: '/404', + component: () => import('@/pages/404.vue'), + }, + { + name: 'login', path: '/login', component: () => import('@/pages/login.vue'), }, @@ -61,10 +67,10 @@ function transformRoute(route, parentPath = '') { transformed.component = components[componentPath]; } else { console.error(`组件不存在: ${componentPath}`); + // router.addRoute({ path: '/:catchAll(.*)', redirect: '/404' }); return null; // 跳过无效路由 } } - return transformed; } @@ -75,14 +81,17 @@ const setupDynamicRoutes = async () => { const backendRoutes = res.data; const useMenuStores = useMenuStore(); useMenuStores.getAllMenu(backendRoutes); - // useMenuStores.changeRemoveAll(); - // 转换路由 const transformedRoutes = backendRoutes.map(route => transformRoute(route)).filter(Boolean); // 过滤掉无效路由 // 添加动态路由到 `/home` transformedRoutes.forEach(route => { router.addRoute('home', route); }); + // 添加一个catch-all路由，确保无效路由会重定向到 404 + router.addRoute({ + path: '/:catchAll(.*)', // 使用 catchAll 匹配所有路径 + redirect: '/404', // 重定向到 404 页面 + }); return res; } catch (error) { console.error('Failed to setup dynamic routes:', error); @@ -94,18 +103,20 @@ let dynamicRoutesLoaded = false; // 防止重复加载动态路由 router.beforeEach(async (to, from, next) => { NProgress.start(); // 开启进度条 const useMenuStores = useMenuStore(); - if (to.path === '/login') { + const funcAll = () => { localStorage.clear(); // 清除所有 localStorage 数据 - useMenuStores.changeRemoveAll(); + }; + if (to.path === '/login') { + // localStorage.clear(); // 清除所有 localStorage 数据 + // useMenuStores.changeRemoveAll(); + funcAll(); next(); // 登录页直接放行 return; } // 如果没有 refToken 则跳转回登录页 if (!localStorage.getItem('refreshToken')) { - console.log('没有refToken'); - localStorage.clear(); // 清除所有 localStorage 数据 - useMenuStores.changeRemoveAll(); + funcAll(); return next('/login'); } @@ -116,8 +127,7 @@ router.beforeEach(async (to, from, next) => { next({ ...to, replace: true }); // 重新导航到当前路径，确保新添加的路由生效 return; } catch (err) { - localStorage.clear(); // 清除所有 localStorage 数据 - useMenuStores.changeRemoveAll(); + funcAll(); next('/login'); // 跳转到登录页 } } else { -- Gitee