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