SpringBoot+Vue动态菜单权限设计：从数据库到侧边栏的完整实现-北京尧图网络

1. 项目概述与核心价值最近在跟着B站程序员青戈的《从0开始带你手撸一套SpringBootVue后台管理系统》系列视频学习这个系列对于想从零构建一个完整前后端分离项目的朋友来说确实是个宝藏。我刚刚啃完了第20个视频主题是“权限菜单上”。这部分内容可以说是后台管理系统的灵魂所在它直接决定了不同角色的用户登录后能看到什么、能操作什么。很多新手在学完增删改查后一到权限这里就容易卡壳感觉概念多、关系复杂。青戈老师在这个视频里用实战的方式把菜单权限的核心流程给串了起来尤其是前端Vue的动态路由与后端SpringBoot的权限数据如何联动讲得非常清晰。这篇笔记我就结合自己的理解和实操中踩过的坑把“权限菜单上”这部分的核心思路、技术实现细节以及一些容易忽略的要点系统地梳理一遍。无论你是正在跟着这个系列学习的小白还是对后台管理系统权限设计感兴趣的朋友相信都能从中获得可以直接落地的参考。简单来说这一讲解决的核心问题是如何根据登录用户的角色动态地生成他所能访问的侧边栏菜单。这不仅仅是前端展示几个按钮那么简单它涉及到前后端完整的数据流后端需要提供结构化的菜单数据前端需要将这些数据转换成可被路由系统识别的路由对象并最终渲染成导航菜单。整个流程环环相扣任何一个环节理解不到位都可能导致菜单出不来或者权限控制失效。2. 权限菜单的核心设计思路拆解在开始敲代码之前我们必须把权限菜单的设计思路理清楚。很多朋友一上来就照着视频敲但如果不明白背后的“为什么”一旦需求稍有变动或者出了问题就会无从下手。2.1 权限的两种常见形态菜单权限 vs. 按钮权限首先得明确我们通常说的“权限”在后台管理系统中至少分为两个层级菜单/路由权限控制用户能看到哪些一级导航、二级菜单甚至三级页面。这是最宏观的权限控制决定了用户的功能入口。例如普通员工只能看到“我的工作台”和“任务列表”而部门经理则额外能看到“数据报表”和“人员管理”。按钮/接口权限在同一个页面内控制用户能执行哪些操作。例如在“用户列表”页面管理员有“新增”、“删除”、“编辑”按钮而普通用户只有“查看”按钮。这部分通常与具体的API接口绑定。青戈老师第20讲聚焦的是第一层——菜单权限。这是构建权限体系的基石只有先让用户“进入”正确的功能模块后续的按钮权限才有意义。2.2 核心数据流与组件职责一个典型的动态菜单生成流程其数据流是这样的后端SpringBoot-前端Vue Router Store-前端Menu Component后端提供数据用户登录成功后后端接口根据该用户的角色ID查询出该角色被授权的所有菜单项。这些菜单数据通常是一个嵌套的树形结构JSON格式包含了菜单的名称、路径、图标、组件地址等关键信息。前端转换与注册前端通常是Vuex或Pinia Store接收到这份菜单数据后并不能直接使用。因为Vue Router需要的是路由配置对象而不是简单的菜单列表。因此需要一个“转换函数”将后端返回的菜单树映射成符合Vue Router要求的routes数组。然后通过router.addRoute()方法将这些动态路由添加到现有的路由实例中。前端渲染菜单侧边栏导航菜单组件比如用el-menu从Store中获取已经转换好的菜单树或原始树但包含路由信息进行递归渲染生成可视化的菜单列表。当用户点击菜单时就能跳转到对应的动态注册的路由页面。这个过程中最关键的难点在于第二步的转换。后端菜单的字段名如menuName,path,component如何对应到前端路由的字段name,path,component特别是component字段它需要是一个真实的Vue组件引用或懒加载函数。2.3 为什么需要动态路由有的朋友可能会问我提前把所有路由都定义好然后根据权限显示或隐藏菜单不就行了这样做的弊端很大安全性问题虽然菜单隐藏了但用户如果知道URL依然可以通过直接输入地址的方式访问未授权的页面。动态路由是从根源上移除未授权路由用户即使输入地址也会被导航到404页面。性能与打包问题如果提前定义所有路由并使用懒加载虽然用户看不到菜单但对应的组件chunk文件仍然会被打包。动态路由可以实现真正的“按需加载”只有用户有权限的页面其对应的组件代码才会被加载。维护性当系统模块非常多时集中式的路由定义文件会变得异常庞大和难以维护。动态路由将路由的定义部分转移到了后端数据库前端只需一个通用的转换逻辑更易于模块化管理。3. 数据库与后端模型设计详解要实现动态菜单后端的数据库设计是源头。这里的设计直接影响着前端数据处理的复杂度。3.1 菜单表sys_menu核心字段设计通常我们会设计一张菜单表它不仅仅存储菜单信息也隐含着路由信息。以下是一些核心字段及其作用字段名类型描述对应前端路由字段idBigInt主键自增-parent_idBigInt父菜单ID用于构建树形结构0表示根目录-nameVarchar菜单名称如“用户管理”路由的meta.titlepathVarchar路由路径如“/system/user”路由的pathcomponentVarchar组件路径如“system/user/index”路由的component(需转换)permsVarchar菜单关联的权限标识符如“system:user:list”用于按钮权限-iconVarchar菜单图标如“el-icon-user”路由的meta.icontypeTinyInt菜单类型0:目录1:菜单2:按钮用于过滤只有类型为0和1的才生成路由order_numInt显示排序用于前端菜单排序statusTinyInt状态0:正常1:停用-注意component字段的存储值是一个字符串路径。在前端项目中我们的Vue组件文件是按照一定的目录结构存放的如src/views/system/user/index.vue。这里存储的system/user/index需要在前端通过一定的方法如() import(‘/views/’ component ‘.vue’)转换成真正的组件懒加载引用。这是前后端协作的一个关键约定。3.2 实体类与递归树形结构在SpringBoot中我们对应地创建一个Menu实体类。为了构建树形结构通常会在实体类中增加一个ListMenu children字段。Data TableName(“sys_menu”) // 假设使用MyBatis-Plus public class Menu { private Long id; private Long parentId; private String name; private String path; private String component; private String perms; private String icon; private Integer type; // 0目录1菜单2按钮 private Integer orderNum; private Integer status; // 非数据库字段用于构建树 TableField(exist false) private ListMenu children; }查询时我们一次性查出当前用户有权限的所有菜单type in (0,1)然后在Service层通过递归或工具类如Hutool的TreeUtil将其组装成树形结构。这个树形结构的JSON就是最终返回给前端的数据。3.3 后端接口实现要点核心接口是GET /api/menu/nav或GET /api/user/menus。获取当前用户ID从SecurityContext或JWT Token中解析出当前登录用户的ID。关联查询通过用户-角色-菜单的关联关系通常涉及sys_user_role,sys_role_menu表查询出该用户能访问的所有菜单ID集合。查询菜单详情根据菜单ID集合查询sys_menu表获取完整的菜单信息列表。构建树形结构将扁平的菜单列表根据parent_id构建成嵌套的树形结构。这里要注意处理根节点parent_id0和排序order_num。返回结果将构建好的菜单树返回给前端。实操心得在构建树形结构时务必注意循环引用问题。如果数据异常导致父子关系成环比如A的父节点是BB的父节点又是A递归算法会陷入死循环导致栈溢出。可以在递归前加一个简单的判断或者确保数据库中的数据是严格的金字塔结构。4. 前端Vue的动态路由转换实战前端拿到后端的菜单树后真正的挑战才开始。这是将数据“激活”为功能的关键一步。4.1 路由转换函数详解这是整个前端权限模块的核心函数。它需要递归地遍历后端返回的菜单树将每个菜单节点类型为0或1转换成一个Vue Router的路由配置对象。假设我们在Store以Vuex为例的action中调用接口获取菜单数据// store/modules/user.js (Vuex) actions: { async getMenuList({ commit }) { try { const { data } await getMenuListApi(); // 调用后端接口 // 关键步骤将菜单数据转换为路由 const routes convertMenuToRoutes(data); // 将转换后的路由和原始菜单树都存入state commit(‘SET_MENU_LIST’, data); commit(‘SET_DYNAMIC_ROUTES’, routes); return routes; } catch (error) { console.error(‘获取菜单失败’, error); return []; } } }下面是convertMenuToRoutes函数的一种实现// utils/route-converter.js /** * 将后端菜单列表转换为Vue Router路由配置 * param {Array} menuList 后端返回的菜单树 * returns {Array} 符合Vue Router格式的路由数组 */ export function convertMenuToRoutes(menuList) { const routes []; for (const menu of menuList) { // 只处理类型为目录(0)和菜单(1)的项按钮(2)不需要生成路由 if (menu.type 2) continue; const route { path: menu.path, name: menu.name, // 或者用menu.id确保唯一性 meta: { title: menu.name, icon: menu.icon, // 可以附带其他权限信息如perms perms: menu.perms } }; // 核心处理component字段 if (menu.component) { // 假设menu.component存储的是类似 ‘system/user/index’ 的字符串 // 需要映射到 ‘/views/system/user/index.vue’ // 使用Webpack的动态import实现懒加载 route.component () import(/views/${menu.component}.vue); } else { // 对于目录没有对应组件通常使用一个布局组件如Layout // 或者一个空组件具体看你的布局设计 route.component () import(‘/layout/Layout.vue’); } // 递归处理子菜单 if (menu.children menu.children.length 0) { route.children convertMenuToRoutes(menu.children); // 一个常见问题如果父路由是目录其默认重定向到第一个子路由 if (!route.redirect route.children.length 0) { route.redirect route.children[0].path; } } routes.push(route); } return routes; }4.2 动态路由的注册时机与方式转换好的路由数组不能直接使用必须通过Vue Router的API添加到路由实例中。这个操作通常发生在用户登录成功之后。在登录成功的回调中调用在登录的action中调用getMenuListaction获取菜单并转换路由。使用router.addRoute()Vue Router 3.x (对应Vue2) 使用router.addRoutes()Vue Router 4.x (对应Vue3) 使用router.addRoute()。这里以Vue3为例// 在用户Store的action中或登录页面的登录逻辑中 import router from ‘/router’; async function handleLogin() { // ... 登录逻辑 // 获取动态路由 const dynamicRoutes await store.dispatch(‘user/getMenuList’); // 将动态路由添加到路由器 dynamicRoutes.forEach(route { // 注意通常动态路由需要添加在一个固定的父路由下如Layout // 假设我们有一个固定的、名为’AppLayout’的父路由 router.addRoute(‘AppLayout’, route); // 将动态路由添加为’AppLayout’的子路由 }); // 添加完路由后跳转到首页 await router.push(‘/dashboard’); }重要提示router.addRoute()添加的路由是非持久化的。一旦用户刷新页面Vue应用和Router实例会重新初始化动态添加的路由就会丢失。因此我们必须在应用初始化时如App.vue的created钩子或路由守卫中根据本地存储如localStorage中的用户Token重新获取用户信息和菜单并再次调用addRoute来恢复路由状态。这是实现刷新页面不丢失权限的关键。4.3 侧边栏菜单组件的递归渲染路由注册好了最后一步就是在侧边栏Sidebar中把它们展示出来。这需要一个能够递归渲染的菜单组件。我们使用Element Plus的el-menu组件为例它天然支持嵌套。我们从Vuex中取出菜单树注意这里取的是原始的、带children的菜单树而不是扁平化的路由数组然后进行递归渲染。!-- components/layout/Sidebar.vue -- template el-menu :default-active“activeMenu” :unique-opened“true” router select“handleSelect” sidebar-item v-for“route in menuList” :key“route.path” :item“route” / /el-menu /template script setup import { computed } from ‘vue’; import { useRoute } from ‘vue-router’; import { useStore } from ‘vuex’; import SidebarItem from ‘./SidebarItem.vue’; const route useRoute(); const store useStore(); // 从store中获取菜单树 const menuList computed(() store.state.user.menuList); // 计算当前激活的菜单用于高亮 const activeMenu computed(() { const { meta, path } route; // 如果有设置activeMenu属性则优先使用 if (meta.activeMenu) { return meta.activeMenu; } return path; }); /script递归组件SidebarItem.vue!-- components/layout/SidebarItem.vue -- template !-- 如果没有子菜单或者子菜单都是按钮类型则渲染为 el-menu-item -- el-menu-item v-if“!hasChildren” :index“resolvePath(item.path)” i v-if“item.icon” :class“item.icon”/i template #title{{ item.name }}/template /el-menu-item !-- 否则渲染为可折叠的 el-sub-menu -- el-sub-menu v-else :index“resolvePath(item.path)” template #title i v-if“item.icon” :class“item.icon”/i span{{ item.name }}/span /template !-- 递归调用自身渲染子菜单 -- sidebar-item v-for“child in item.children” :key“child.path” :item“child” :base-path“resolvePath(item.path)” / /el-sub-menu /template script setup import { computed } from ‘vue’; const props defineProps({ item: { type: Object, required: true }, basePath: { type: String, default: ‘’ } }); // 判断是否有需要显示的子菜单过滤掉类型为按钮的子项 const hasChildren computed(() { return props.item.children props.item.children.filter(child child.type ! 2).length 0; }); // 解析完整路径处理嵌套路由的路径拼接 function resolvePath(routePath) { // 如果是以 / 开头则认为是绝对路径 if (routePath.startsWith(‘/’)) { return routePath; } // 否则拼接基础路径 return ${props.basePath}/${routePath}.replace(/\//g, ‘/’); } /script5. 关键问题与避坑指南实录在实际操作中一定会遇到各种各样的问题。下面是我在学习和实践中总结的几个典型问题及其解决方案。5.1 刷新页面后动态路由丢失跳转404这是最常见的问题。原因上面提到过动态路由是运行时添加到Router实例的刷新页面后实例重置路由就没了。解决方案在应用入口如main.js或App.vue的onMounted或全局路由守卫中增加路由恢复逻辑。// 在路由守卫中 (router/index.js) router.beforeEach(async (to, from, next) { // 如果用户已登录有token if (store.state.user.token) { // 并且当前还没有加载过动态路由 if (!store.state.user.menuLoaded) { try { // 重新获取用户信息和菜单 await store.dispatch(‘user/getInfo’); await store.dispatch(‘user/getMenuList’); // 标记已加载 store.commit(‘user/SET_MENU_LOADED’, true); // 动态路由添加完成后需要重定向到目标路由 // replace: true 避免在history中留下重复记录 next({ …to, replace: true }); } catch (error) { // 如果获取失败可能是token过期清空用户状态并跳转到登录页 await store.dispatch(‘user/logout’); next(/login?redirect${to.path}); } } else { next(); } } else { // 未登录跳转到登录页 if (to.path ‘/login’) { next(); } else { next(/login?redirect${to.path}); } } });5.2 路由重复添加导致控制台警告或导航异常如果在beforeEach守卫中每次路由跳转都执行一次addRoute会导致路由重复添加。Vue Router会抛出警告并且可能导致导航行为异常。解决方案必须有一个状态位如menuLoaded来标记动态路由是否已经添加过。只有第一次进入或者用户重新登录后状态重置才执行添加操作。具体可参考上面代码中的if (!store.state.user.menuLoaded)判断。5.3 动态路由的组件加载失败404错误信息可能是Cannot find module ‘/views/xxx/xxx.vue’。问题出在component字段的转换上。排查步骤检查后端数据确认sys_menu表中component字段的值是否正确。它应该是一个相对于src/views目录的路径且不包含文件扩展名。例如组件文件在src/views/system/user/index.vue那么字段值应为system/user/index。检查前端转换函数确认convertMenuToRoutes函数中拼接import路径的逻辑是否正确。确保/views/这个别名在你的构建工具Vite或Webpack中正确配置。检查文件是否存在最终拼接的路径/views/system/user/index.vue对应的物理文件是否真的存在于项目中。实操心得在开发环境可以使用console.log打印出转换后的route.component函数或者打印出完整的动态路由数组仔细核对每个路由对象的path和component属性。对于懒加载component应该是一个函数打印出来会显示function(){…}。5.4 菜单图标不显示图标字段icon通常存储的是图标库的类名如el-icon-user或UserFilled。解决方案对于Element UI/Plus如果使用类名直接i :class“item.icon”/i即可。如果使用的是SVG图标如el-icon升级版或自定义图标则需要使用el-icon组件包裹并通过component属性动态加载。确保图标库已引入在main.js中正确引入了整个图标库或按需引入了所需的图标组件。5.5 路由跳转后侧边栏菜单激活状态不正确可能表现为点击菜单进入子页面后侧边栏对应的一级菜单没有高亮展开。解决方案设置el-menu的router属性为true这样el-menu会自动根据当前路由的path来激活菜单项。正确处理嵌套路由的激活状态default-active属性需要绑定到当前路由的完整路径。在复杂的嵌套路由下可能需要计算一个“激活菜单路径”。例如/system/user/list对应的激活菜单可能是/system/user。可以在路由的meta中定义一个activeMenu字段来指定。使用el-sub-menu的index属性index属性应该设置为该菜单项对应的路由路径这样在路由匹配时才能正确展开父级菜单。6. 权限体系的扩展思考与优化方向完成了基础的动态菜单我们的权限系统算是搭起了骨架。但这仅仅是开始一个健壮的权限系统还有很多可以深化和优化的地方。6.1 按钮级权限的控制菜单权限控制的是“能否进入”按钮权限控制的是“进入后能做什么”。实现按钮权限通常有两种思路前端控制显示/隐藏在Store中存储当前用户的所有权限标识符perms列表。在按钮组件上通过一个自定义指令如v-permission或一个全局方法如$hasPerm(‘system:user:add’)来判断是否渲染该按钮。后端控制接口拦截前端不做显示控制任何用户都能看到按钮。但当用户点击按钮触发请求时后端接口会根据用户的权限标识进行校验无权限则返回特定的错误码如403前端再统一提示“权限不足”。这种方式更安全但用户体验稍差。通常两者结合是更佳实践前端根据权限标识控制按钮的显示/隐藏提升体验后端在接口层面再做一次坚固的校验保证安全。6.2 路由元信息meta的深度利用在转换路由时我们把菜单的很多信息放入了meta对象。这个meta字段非常强大可以用于页面权限校验在全局路由守卫中检查目标路由的meta.requiresAuth、meta.roles或meta.perms与当前用户信息进行比对实现更细粒度的路由拦截。面包屑导航meta中可以存储title和parent信息用于动态生成面包屑。页面缓存keep-alive通过meta.noCache或meta.name来配合keep-alive的include/exclude属性实现特定页面的缓存控制。6.3 菜单与路由的分离设计在更复杂的系统中菜单和路由可能不是严格的一一对应关系。例如一个路由对应多个菜单项比如“详情页”可能从不同的菜单入口都能进入。菜单项没有对应路由比如一个纯外链菜单点击后跳转到外部系统。隐藏路由有些路由如404页面、个人中心页不需要在侧边栏显示。这就要求我们在设计数据库和转换逻辑时增加更多的字段如isExternal,isHidden和更灵活的判断逻辑将“路由定义”和“菜单展示”适度解耦。6.4 性能优化考虑路由懒加载我们已经在component: () import(…)中实现了。确保所有动态路由都使用此语法。菜单数据缓存用户菜单数据在首次登录后可以缓存在localStorage或sessionStorage中并设置合理的过期策略。这样在短时间刷新页面时可以避免重复请求菜单接口。扁平化路由表对于超大型系统嵌套过深的路由树可能会影响Vue Router的匹配效率。可以考虑在转换时将嵌套路由拍平同时处理好path注册为一级路由但这需要更精细的路由设计。跟着青戈老师的视频把权限菜单的上半部分走通最大的收获不是敲完了多少行代码而是真正理解了前后端在权限控制这个场景下是如何协同工作的。从数据库的一个type字段到前端侧边栏的一个高亮菜单项这中间每一个环节的设计都值得反复琢磨。尤其是那个路由转换函数它像一座桥连接了后端的数据世界和前端的组件世界。自己动手实现一遍再遇到类似的权限需求心里就有底了。在实现过程中我最深的体会是一定要把数据流在纸上画出来。从前端发起登录请求到后端查库组装树再到前端转换注册最后渲染菜单把这个流程图画清楚很多bug的产生点就一目了然了。下一步就可以基于这个菜单权限的骨架去填充按钮权限、数据权限这些“血肉”让整个后台管理系统变得更加坚固和灵活。

SpringBoot+Vue动态菜单权限设计：从数据库到侧边栏的完整实现

相关推荐

深度解析OBS Studio多机位直播架构：从核心原理到高级应用

RSSHub Radar：智能RSS订阅解决方案与使用技巧

LCD接口技术对比：MCU与RGB的核心差异与应用

更多资讯

台州电工证考证含金量有多高？考证前必须知道的5件事

电工证被拉黑怎么恢复怎么报名

登高电工证好考吗现在多少钱

东方考电工证在哪里考网上查询外省证怎么转

低压电工证有积分吗报名费多少钱低压电工证有积分吗怎么考

特种作业你操作证到期换证流程怎么走？官方报名入口全知道

今日更新

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？

相关推荐

深度解析OBS Studio多机位直播架构：从核心原理到高级应用

RSSHub Radar：智能RSS订阅解决方案与使用技巧

LCD接口技术对比：MCU与RGB的核心差异与应用

更多资讯

台州电工证考证含金量有多高？考证前必须知道的5件事

电工证被拉黑怎么恢复怎么报名

登高电工证好考吗现在多少钱

东方考电工证在哪里考 网上查询外省证怎么转

低压电工证有积分吗报名费多少钱 低压电工证有积分吗怎么考

特种作业你操作证到期换证流程怎么走？官方报名入口全知道

今日更新

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗 良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗 良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？

东方考电工证在哪里考网上查询外省证怎么转

低压电工证有积分吗报名费多少钱低压电工证有积分吗怎么考

新疆电工作业干活累吗良心建议助你避开考不过的坑

新疆电工作业干活累吗良心建议助你避开考不过的坑