然后建设一个论坛网站,中国免费网站服务器下载,设计一个完整的静态网站,免费微信小程序制作平台?大家好#xff0c;我是江城开朗的豌豆#xff0c;一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术#xff0c;并深入掌握Vue、React、Uniapp、Flutter等主流框架#xff0c;能够高效解决各类前端开发问题。在我的技术栈中#xff0c;除了…大家好我是江城开朗的豌豆一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术并深入掌握Vue、React、Uniapp、Flutter等主流框架能够高效解决各类前端开发问题。在我的技术栈中除了常见的前端开发技术我还擅长3D开发熟练使用Three.js进行3D图形绘制并在虚拟现实与数字孪生技术上积累了丰富的经验特别是在虚幻引擎开发方面有着深入的理解和实践。 我一直认为技术的不断探索和实践是进步的源泉近年来我深入研究大数据算法的应用与发展尤其在数据可视化和交互体验方面取得了显著的成果。我也注重与团队的合作能够有效地推动项目的进展和优化开发流程。现在我担任全栈工程师拥有CSDN博客专家认证及阿里云专家博主称号希望通过分享我的技术心得与经验帮助更多人提升自己的技术水平成为更优秀的开发者。
技术qq交流群906392632
目录
一、需求场景
二、核心思路
三、具体实现
1. 定义所有可能的菜单项
2. 根据权限动态过滤
3. 在Vue中动态渲染
四、优化技巧
五、避坑指南
六、总结 大家好我是小杨一个干了6年的前端老油条。
今天想和大家聊聊一个实际项目中经常遇到的场景——动态权限绑定渲染列表。说白了就是“根据用户权限决定页面上显示哪些内容”。听起来简单但实际实现时不少小伙伴容易绕晕比如权限判断混乱、重复渲染、代码冗余等问题。
下面我就用Vue为例分享一个清晰、优雅的实现方案保证你看完就能用到自己的项目里 一、需求场景
假设我在做一个后台管理系统不同用户权限不同 管理员能看到所有菜单用户管理、订单管理、系统设置 普通用户只能看到订单管理 运营人员能看到订单管理、数据统计
这时候如果硬编码菜单列表每次改权限都得重新发版显然不现实。我们需要动态渲染根据用户权限返回的数据决定显示什么。 二、核心思路 权限数据来源通常由后端接口返回比如 // 假设接口返回的权限标识如下
const myPermissions [order, data] // 我有订单和数据统计权限 前端权限映射将权限标识和实际菜单项关联起来。 动态过滤列表根据权限标识过滤出可显示的菜单。 三、具体实现
1. 定义所有可能的菜单项
先在前端维护一个全量菜单列表包含所有可能的菜单项和对应的权限标识
const allMenuList [{ name: 用户管理, key: user, icon: el-icon-user },{ name: 订单管理, key: order, icon: el-icon-tickets },{ name: 数据统计, key: data, icon: el-icon-pie-chart },{ name: 系统设置, key: settings, icon: el-icon-setting },
]
2. 根据权限动态过滤
拿到后端返回的权限标识比如myPermissions后过滤出有权限的菜单
// 过滤函数
function getFilteredMenu(permissions) {return allMenuList.filter(menu permissions.includes(menu.key))
}// 使用示例
const myMenu getFilteredMenu(myPermissions) // 输出我能看到的菜单
3. 在Vue中动态渲染
用计算属性实现响应式更新模板里直接v-for循环
templatedivdiv v-foritem in visibleMenu :keyitem.keyi :classitem.icon/ispan{{ item.name }}/span/div/div
/templatescript
export default {data() {return {myPermissions: [order, data], // 模拟我的权限allMenuList: [/* 同上 */],}},computed: {visibleMenu() {return this.allMenuList.filter(menu this.myPermissions.includes(menu.key))}}
}
/script 四、优化技巧 权限持久化把权限存到localStorage或Vuex避免每次刷新重新请求。 兜底处理如果接口失败可以默认显示一个基本菜单比如只有首页。 按钮级权限同理可以用v-if控制按钮显示 button v-ifmyPermissions.includes(add)添加/button 五、避坑指南 不要在前端写死权限判断比如if (role admin)这样很难维护。 权限标识尽量语义化比如用order:read、order:write区分读写权限。 和后端对齐权限字段避免前端key和后端返回对不上。 六、总结
动态权限渲染的核心就是全量定义 动态过滤。 前端维护完整列表后端返回权限标识。 用计算属性或工具函数过滤出可见内容。 按钮、菜单、路由都可以用同一套逻辑控制。
如果对你有帮助点个赞吧 你还遇到过哪些权限控制的坑评论区聊聊
