vue权限控制-- 路由鉴权，菜单动态渲染，自定义指令渲染按钮，递归处理数据

Vue.js权限控制主要涉及以下几个方面： 1. **路由鉴权** (Route Authorization)：在 Vue 中，可以利用 `beforeEach` 或 `async beforeEach` 钩子函数，在每次路由跳转之前检查用户是否有访问当前路径的权限。如果用户无权访问，可以返回 `redirect` 或 `next(false)` 来阻止路由切换。 ```javascript router.beforeEach((to, from, next) => { // 检查用户权限 checkUserPermission(to.name).then(hasPermission => { if (hasPermission) { next(); } else { next('/not-permitted'); } }); }); ``` 2. **菜单动态渲染** (Dynamic Menu Rendering)：基于用户的权限信息，可以在组件挂载时或者登录状态改变时，更新 `v-for` 中的数据源，只展示用户有权限访问的菜单项。 ```vue <template> <ul> <li v-for="item in menuItems" :key="item.path"> {{ item.label }} <!-- 如果用户有权限则显示 --> <router-link :to="item.path" v-if="checkPermission(item.permission)"> ... </router-link> </li> </ul> </template> <script> export default { computed: { menuItems() { return this.getUserPermissions().map(permissionItem => ({ ...permissionItem, path: `/some-route/${permissionItem.id}`, })); }, }, methods: { checkPermission(permission) { return permission.some(currentPermission => this.userPermissions.includes(currentPermission)); }, getUserPermissions() { // 获取用户实际拥有的权限数组 }, }, }; </script> ``` 3. **自定义指令渲染按钮** (Custom Directive for Button Rendering): 可以创建一个自定义指令如 `v-has-role`，在满足特定角色条件时才显示按钮。例如，只有管理员才能看到“删除”按钮。 ```html <button v-has-role="admin">删除</button> ``` 4. **递归处理数据** (Recursive Data Processing): 当数据结构包含嵌套的对象或数组时，需要使用递归来遍历和处理。可以编写一个通用的 `forEach` 或者 `map` 函数，配合 `v-for` 和 `if` 条件判断，对每个层级的数据进行权限检查。 ```vue <template> <div> <ul v-for="(item, index) in data" :key="index"> <li v-if="checkPermission(item.permission)"> {{ item.label }} <!-- 子级菜单同理 --> <ul v-for="subItem in item.subItems"> <li v-if="checkPermission(subItem.permission)"> {{ subItem.label }} </li> </ul> </li> </ul> </div> </template> ```