Vue 分权案例：基于角色的权限控制

以下是一个简单的 Vue 分权案例：\n\n假设我们有一个简单的用户管理系统，其中包含用户列表和添加用户的功能。我们希望将用户列表的查看权限和添加用户的权限分开，并根据用户的角色来控制权限。\n\n首先，我们需要定义一个权限管理的数据结构，其中包含用户的角色和相应的权限。可以将这些数据存储在一个常量文件中，如roles.js：\n\njavascript\nexport const roles = {\n admin: ['viewUsers', 'addUser'],\n manager: ['viewUsers'],\n user: []\n};\n\n\n在Vue组件中，我们可以通过计算属性来根据当前用户的角色来判断是否具有相应的权限。假设我们有一个名为UserList的组件用于显示用户列表，AddUser组件用于添加用户。\n\n在UserList组件中，我们可以定义一个计算属性hasViewUsersPermission来判断当前用户是否具有查看用户列表的权限：\n\njavascript\ncomputed: {\n hasViewUsersPermission() {\n return this.userRole && roles[this.userRole].includes('viewUsers');\n }\n}\n\n\n然后，在模板中可以根据hasViewUsersPermission的值来决定是否显示用户列表：\n\nhtml\n<template>\n <div>\n <h2>User List</h2>\n <ul v-if="hasViewUsersPermission">\n <li v-for="user in userList" :key="user.id">{{ user.name }}</li>\n </ul>\n <p v-else>No permission to view user list</p>\n </div>\n</template>\n\n\n类似地，在AddUser组件中，我们可以定义一个计算属性hasAddUserPermission来判断当前用户是否具有添加用户的权限：\n\njavascript\ncomputed: {\n hasAddUserPermission() {\n return this.userRole && roles[this.userRole].includes('addUser');\n }\n}\n\n\n然后，在模板中可以根据hasAddUserPermission的值来决定是否显示添加用户的表单：\n\nhtml\n<template>\n <div>\n <h2>Add User</h2>\n <form v-if="hasAddUserPermission">\n <!-- Add user form fields -->\n </form>\n <p v-else>No permission to add user</p>\n </div>\n</template>\n\n\n最后，在父组件中，我们可以根据当前用户的角色来动态渲染UserList和AddUser组件：\n\nhtml\n<template>\n <div>\n <user-list v-if="userRole"></user-list>\n <add-user v-if="userRole"></add-user>\n </div>\n</template>\n\n<script>\nimport UserList from './UserList.vue';\nimport AddUser from './AddUser.vue';\n\nexport default {\n components: {\n UserList,\n AddUser\n },\n data() {\n return {\n userRole: 'admin' // 假设当前用户角色为管理员\n };\n }\n};\n</script>\n\n\n通过以上的方式，我们成功实现了一个简单的 Vue 分权案例。根据用户的角色，我们可以动态地控制用户是否具有查看用户列表和添加用户的权限。