当前位置：首页 > java >正文

Vue权限控制小妙招：动态渲染列表的优雅实现

java 2025/6/18 6:39:55

大家好，我是江城开朗的豌豆，一名拥有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循环：

<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控制按钮显示：
```
<button v-if="myPermissions.includes('add')">添加</button>
```