项目仓库:https://github.com/changeclass/vue-shop
创建子分支并推送
1 2
| git checkout -b rights git push -u origin rights
|
权限管理标签
根据不同等级分配不同颜色的标签。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <el-table :data="rightsList" border stripe> <el-table-column type="index"></el-table-column> <el-table-column label="权限名称" prop="authName"></el-table-column> <el-table-column label="路径" prop="path"></el-table-column> <el-table-column label="权限等级" prop="level"> <template v-slot="scoped"> <el-tag v-if="scoped.row.level == 0">一级</el-tag> <el-tag type="success" v-else-if="scoped.row.level == 1" >二级</el-tag > <el-tag type="warning" v-else>三级</el-tag> </template> </el-table-column> </el-table>
|
权限管理列表
将权限赋予某个角色,再将角色赋予给用户。
权限列表使用了展开列,将el-table-column
的type
值改为expand
即可。在展开列通过三个v-for
嵌套循环三中权限。
html布局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
| <el-table :data="rolesList" border stripe> <el-table-column type="expand"> <template v-slot="scoped"> <el-row :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']" v-for="(item1, i1) in scoped.row.children" :key="item1.id" > <el-col :span="4"> <el-tag closable @close="removeRightById(scoped.row, item1.id)"> {{ item1.authName }}</el-tag > <i class="el-icon-caret-right"></i> </el-col> <el-col :span="19"> <el-row :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']" v-for="(item2, i2) in item1.children" :key="item2.key" > <el-col :span="6"> <el-tag closable type="success" @close="removeRightById(scoped.row, item2.id)" >{{ item2.authName }}</el-tag > <i class="el-icon-caret-right"></i> </el-col> <el-col :span="18"> <el-tag v-for="item3 in item2.children" :key="item3.id" type="warning" closable @close="removeRightById(scoped.row, item3.id)" >{{ item3.authName }}</el-tag > </el-col> </el-row> </el-col> </el-row> </template> </el-table-column> <el-table-column type="index"></el-table-column> <el-table-column label="角色名称" prop="roleName"></el-table-column> <el-table-column label="角色描述" prop="roleDesc"></el-table-column> <el-table-column label="操作" width="300px"> <template> <el-button size="mini" type="primary" icon="el-icon-edit" >编辑</el-button > <el-button size="mini" type="danger" icon="el-icon-delete" >删除</el-button > <el-button size="mini" type="warning" icon="el-icon-setting" >分配权限</el-button > </template> </el-table-column> </el-table>
|
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| export default { data () { return { rolesList: [] } }, created () { this.getRolesList() }, methods: { async getRolesList () { const { data: res } = await this.$http.get('/roles') if (res.meta.status !== 200) { return this.$message.error('获取权限列表失败') } this.rolesList = res.data console.log(this.rolesList) }, async removeRightById (role, rightId) { const confirmRuselt = await this.$confirm('此操作将移除权限, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(err => err) console.log(confirmRuselt) if (confirmRuselt !== 'confirm') { return this.$message.info('取消了删除!') } const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`) if (res.meta.status !== 200) { return this.$message.error('删除权限失败') } role.children = res.data } } }
|
分配权限
UI实现
首先是点击按钮后弹出对话框,主要核心功能是树形组件。
1 2 3 4 5 6 7 8
| <el-tree :data="rightsList" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ></el-tree>
|
对话框打开时应发起请求获取数据,并将权限填充到数据供html进行渲染
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| async showSetRightDialog (role, arr) { const { data: res } = await this.$http.get('rights/tree') if (res.meta.status !== 200) { return this.$message.error('获取权限失败') } this.rightsList = res.data this.getLeafKeys(role, this.defKeys) this.setRightDialogVisible = true }, getLeafKeys (node, arr) { if (!node.children) { return arr.push(node.id) } node.children.forEach(element => { this.getLeafKeys(element, arr) }) }, setRightDialogClosed () { this.defKeys = [] }
|
修改权限
修改权限只需要将权限ID以数组形式进行传入,并将角色ID进行传入即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| async allotRights () { const keys = [ ...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys() ] const idStr = keys.join(',') const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr }) console.log(res) if (res.meta.status !== 200) { return this.$message.error('更新权限失败') } this.$message.success('更新权限成功') this.getRolesList() this.setRightDialogVisible = false }
|
在对话框内无法获取角色ID,因此当点击按钮时就对数据进行设置当前的角色ID。
1 2 3
| async showSetRightDialog (role) { this.roleId = role.id }
|
分配角色
点击分配角色后也会弹出一个对话框,对话框使用了select
和option
组件。
1 2 3 4 5 6 7 8 9
| <el-select v-model="selectedRoleId" placeholder="请选择"> <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id" > </el-option> </el-select>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| async setRole (userinfo) { this.userInfo = userinfo const { data: res } = await this.$http.get('roles') if (res.meta.status !== 200) { return this.$message.error('获取角色列表') } this.rolesList = res.data this.setRoleDialogVisible = true }, async saveRoleInfo () { if (!this.selectedRoleId) { return this.$message.error('请选择要分配的角色') }
const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectedRoleId }) if (res.meta.status !== 200) { return this.$message.error('更新失败') } this.$message.success('更新角色列表成功') this.getUserList() this.setRoleDialogVisible = false }, setRoleDialogClosed () { this.selectedRoleId = '' this.userinfo = ' ' }
|
数据值
1 2 3 4 5 6 7 8
| data(){ userInfo: {}, rolesList: [], selectedRoleId: '' }
|