--- theme: vue-pro highlight: a11y-dark --- > 嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: `yk2012yk2012`，微信公众号：`ykyk2012`] 「这是我参与11月更文挑战的第9天，活动详情查看：[2021最后一次更文挑战](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/")」 [项目地址： https://gitee.com/ykang2020/vue_shop](https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Fykang2020%2Fvue_shop "https://gitee.com/ykang2020/vue_shop") # 1. 权限管理业务分析通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecd6ea8a980e4e038dbb41c57652e26a~tplv-k3u1fbpfcp-watermark.image?) # 2. 权限列表 ## 2.1 通过路由展示权限列表组件 1. 新建components/power/Rights.vue 2. 引入路由 ## 2.2 面包屑导航+卡片视图 ```html

首页

权限管理

权限列表

``` ## 2.3 调用API获取权限列表的数据 ```javascript export default { data() { return { // 权限列表 rightsList: [] } }, created() { // 获取所有的权限 this.getRightsList() }, methods: { async getRightsList() { const { data: result } = await this.$http.get('rights/list') if (result.meta.status !== 200) { return this.$message.error('获取权限列表失败！') } this.rightsList = result.data console.log(this.rightsList) } } } ``` ## 2.4 渲染权限列表UI结构 ```html

``` # 3. 角色列表 ## 3.1 通过路由展示角色列表组件 1. 新建components/power/Roles.vue 2. 引入路由 ## 3.2 绘制基本布局结构并获取列表数据 ```html

首页

权限管理

角色列表

添加角色

``` ```javascript export default { data() { return { // 所有角色列表数据 roleList: [] } }, created() { this.getRolesList() }, methods: { // 获取所有角色的列表 async getRolesList() { const { data:result } = await this.$http.get('roles') if(result.meta.status !== 200){ return this.$message.error('获取角色列表失败！'); } this.roleList = result.data console.log(this.roleList) } } } ``` ## 3.3 渲染角色列表数据 ```html

``` ## 3.4 添加角色+编辑+删除操作和用户管理中操作类似 [【Vue】实战项目：电商后台管理系统（Element-UI）（二）用户管理模块](https://blog.csdn.net/weixin_44972008/article/details/114662367) ## 3.5 通过第一层for循环渲染一级权限 ```html ``` ## 3.6 美化一级权限的UI结构添加边框线添加图标 ```html ``` ```css .el-tag { margin: 7px; } .bdtop { border-top: 1px solid #eee; } .bdbottom { border-bottom: 1px solid #eee; } ``` ## 3.7 通过第二层、第三层for循环渲染二级、三级权限 ```html

``` ## 3.8 美化UI结构一级权限 ```html ``` 二级权限 ```html ``` ```css .vcenter { display: flex; align-items: center; } ``` ## 3.9 点击删除权限给权限标签添加属性 ```html {{ item1.authName }} ``` ```html {{ item2.authName }} ``` ```html {{ item3.authName }} ``` ```javascript // 根据Id删除对应的权限 async removeRightById(role, rightId) { // 弹框提示用户是否删除数据 const confirmResult = await this.$confirm( '此操作将永久删除该权限，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).catch(error => error) if (confirmResult !== 'confirm') { return this.$message.info('已经取消删除') } // console.log('确认了删除') const { data: result } = await this.$http.delete( 'roles/' + role.id + '/rights/' + rightId ) if (result.meta.status !== 200) { return this.$message.error('删除权限失败') } this.$message.success('删除权限成功') // this.getRolesList() // 会重新加载页面，不推荐使用 role.children = result.data } ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca619132a99f4ee7834a6fd4481d21ae~tplv-k3u1fbpfcp-zoom-1.image) # 4. 分配权限 ## 4.1 弹出分配权限限制对话框并请求数据 ```html 分配权限 ``` ```html ``` 定义data数据 ```javascript // 控制分配权限对话框显示与隐藏 setRightDialogVisible: false, // 所有权限数据 rightslist: [] ``` ```javascript // 展示分配权限的对话框 async showSetRightDialog() { // 获取所有权限数据 const { data: result } = await this.$http.get('rights/tree') if (result.meta.status !== 200) return this.$message.error('获取权限数据失败') // 获取到的权限数据保存到rightslist中 this.rightslist = result.data console.log(this.rightslist) this.setRightDialogVisible = true } ``` ## 4.2 初步配置并使用el-tree树形控件 ```html ``` ```javascript data() { return { // 树形控件的属性绑定对象 treeProps: { children: 'children', label: 'authName' } } } ``` ## 4.3 优化树形控件的展示效果 1. 添加复选框 `show-checkbox` 2. 指定复选框选中的是id `node-key="id"` 3. 默认展开所有节点 `default-expand-all` ```css ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9ab885f11cc4a92b5244a883a9887e1~tplv-k3u1fbpfcp-zoom-1.image) ## 4.4 已有权限默认选中 ```html 分配权限 ``` ```html ``` ```javascript // 默认选中的节点id值数组 defKeys: [] ``` ```javascript // 展示分配权限的对话框 async showSetRightDialog(role) { // 获取所有权限数据 const { data: result } = await this.$http.get('rights/tree') if (result.meta.status !== 200) return this.$message.error('获取权限数据失败') // 获取到的权限数据保存到rightslist中 this.rightslist = result.data console.log(this.rightslist) // 递归获取三级节点的id this.getLeafKeys(role, this.defKeys) this.setRightDialogVisible = true }, // 通过递归的形式，获取角色下所有三级权限的id，并保存到defKeys数组中 getLeafKeys(node, arr) { // 如果当前节点不包含children属性，则是三级权限节点 if (!node.children) { return arr.push(node.id) } node.children.forEach(item => this.getLeafKeys(item, arr)) } ``` ## 4.5 在关闭对话框时重置defKeys数组 ```html

``` ```javascript // 监听分配权限对话框的关闭事件 setRightDialogClosed() { this.defKeys = [] } ``` ## 4.6 调用API完成分配权限的功能 1. 点开对话框时拿到角色id ```html 分配权限 ``` ```javascript // 当前即将分配权限的角色id roleId: '' ``` ```javascript async showSetRightDialog(role) { this.roleId = role.id } ``` 2. 调用API分配权限 ```html ``` ```html 确定 ``` ```javascript // 点击为角色分配权限 async allotRights() { const keys = [ ...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys() ] // console.log(keys) const idStr = keys.join(',') const { data: result } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr }) if (result.meta.status !== 200) return this.$message.error('分配权限失败！') this.$message.success('分配权限成功') this.getRolesList() this.setRightDialogVisible = false } ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c3579c3c5894b8c807781b4d68c8285~tplv-k3u1fbpfcp-zoom-1.image) # Roles.vue完整代码 ```html ``` # 5. 完成用户管理-用户列表-分配角色功能 Users.vue ## 5.1 渲染分配角色的对话框并请求角色列表数据 ```html

当前用户：{{userInfo.username}}

当前角色：{{userInfo.role_name}}

``` ```html

``` ```javascript // 控制分配角色对话框显示与隐藏 setRoleDialogVisible: false, // 需要被分配角色的用户信息 userInfo: {} // 所有角色的数据列表 rolesList: [] ``` ```javascript // 展示分配角色的对话框 setRole(userInfo) { this.userInfo = userInfo // 在展示对话框之前获取所有角色的列表 const { data: result } = await this.$http.get('roles') if (result.meta.status !== 200) return this.$message.error('获取角色列表失败！') this.$message.success('获取角色列表成功！') this.rolesList = result.data this.setRoleDialogVisible = true } ``` ## 5.2 渲染角色列表的select下拉菜单 ```html

分配新角色：

``` ```javascript // 已选中的角色id值 selectedRoleId: '' ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40ea1a5103a64802beb5ab5c25d8953e~tplv-k3u1fbpfcp-zoom-1.image) ## 5.3 完成分配角色的功能 ```html 确定 ``` ```javascript // 点击按钮分配角色 async saveRoleInf() { if (!this.selectedRoleId) { return this.$message.error('请选择一个角色！') } const { data: result } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectedRoleId }) if (result.meta.status !== 200) { return this.$message.error('更新角色失败！') } this.$message.success('更新角色成功！') // 刷新当前角色列表 this.getUserList() // 隐藏当前分配角色对话框 this.setRoleDialogVisible = false } ``` ```html

``` ```javascript // 监听分配角色对话框的关闭事件 setRoleDialogClosed() { this.selectedRoleId = '' this.userInfo = {} } ``` # 6. 提交代码 ```powershell git branch ``` ```powershell git add . ``` ```powershell git commit -m "完成了权限功能的开发" ``` ```powershell git push ``` ```powershell git checkout master ``` ```powershell git merge rights ``` ```powershell git push ``` [项目地址： https://gitee.com/ykang2020/vue_shop](https://link.juejin.cn/?target=https%3A%2F%2Fgitee.com%2Fykang2020%2Fvue_shop "https://gitee.com/ykang2020/vue_shop") > 最后，欢迎关注我的专栏，和**YK菌**做好朋友！