SpringBoot-Shiro-Vue菜单动态生成：根据用户权限自动构建侧边栏
项目地址: https://gitcode.com/gh_mirrors/sp/SpringBoot-Shiro-Vue SpringBoot-Shiro-Vue权限管理系统通过智能的菜单动态生成机制，实现了基于用户权限的侧边栏自动构建。这套系统能够根据用户的角色和权限，自动过滤和生成可访问的菜单项，为不同用户提供个性化的界面体验。
动态路由生成的核心原理
系统采用前后端分离的权限控制策略，后端负责接口安全验证，前端则根据用户权限动态生成路由菜单。当用户登录后，系统会查询该用户的权限信息，包括menuList和permissionList两个关键属性。
权限数据结构
用户权限信息包含以下关键字段：
- menuList：决定用户可以看到哪些菜单
- permissionList：控制按钮级别和接口访问权限
菜单动态生成流程详解
1. 用户登录与权限获取
用户成功登录后，系统通过vue/src/store/modules/user.js获取用户权限数据，并将其存入Vuex状态管理。
2. 路由过滤算法
核心的菜单过滤逻辑位于vue/src/store/modules/permission.js中的filterAsyncRouter函数：
function filterAsyncRouter(asyncRouterMap, menus) {
const accessedRouters = asyncRouterMap.filter(route => {
if (hasPermission(menus, route)) {
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, menus)
return (route.children && route.children.length)
}
return true
}
return false
})
return accessedRouters
}
3. 权限判断机制
系统通过hasPermission函数来判断用户是否拥有访问特定菜单的权限：
function hasPermission(menus, route) {
if (route.menu) {
return menus.indexOf(route.menu) > -1;
} else {
return true
}
}
路由配置与菜单映射
在vue/src/router/index.js中，系统定义了完整的路由结构：
- constantRouterMap：固定路由，如登录页、404页面
- asyncRouterMap：动态路由，根据用户权限动态生成
每个路由项都包含menu属性，该属性与后端返回的menuList进行匹配，决定菜单是否显示。
实际应用效果
不同角色的菜单差异
- 管理员角色：可以看到完整的系统菜单，包括用户管理、权限配置、文章管理等功能
- 普通用户角色：只能看到基础的文章列表和个人信息管理
- 访客角色：仅能访问公开页面
按钮级别权限控制
除了菜单级别的权限控制，系统还支持按钮级别的权限管理：
export function hasPermission(permission) {
let myPermissions = store.getters.permissions;
return myPermissions.indexOf(permission) > -1;
}
技术优势与特点
🚀 高度自动化
系统自动完成菜单生成过程，无需手动配置每个用户的菜单权限。
🔒 安全性强
基于RBAC权限模型，确保权限控制的准确性和安全性。
📱 用户体验佳
用户只能看到自己有权访问的菜单项，界面简洁明了。
实现要点总结
- 前后端协同：后端提供权限数据，前端负责界面展示
- 递归过滤：支持多级菜单的权限控制
- 实时更新：权限变更后，菜单自动刷新
SpringBoot-Shiro-Vue的菜单动态生成机制为企业级应用提供了灵活、安全的权限管理解决方案，真正实现了"不同用户看到不同界面"的个性化需求。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
