这篇博文的菜单权限按道理来说应该放在这个系列更新的第二篇~but,我想把菜单权限和账号管理一起分析
在菜单管理页面中,设置的不同权限,要判断当前这组的选中权限是哪些
需要保存在当前对话框中选中的权限,因为后续通过请求真正添加时需要携带参数,所以给这个树形结构定义了一个ref属性,为了拿到tree组件实例。tree组件自身有一些方法可以拿到节点数据,如:treeRef.value.getCheckedKeys()
javascript
<template>
....(此处省略了一些代码)
<el-form-item label="权限" prop="permissions">
<el-tree
ref="treeRef"
:data="permissionData"
style="max-width: 600px;"
node-key="id" show-checkbox
:default-checked-keys="defaultKeys"
:default-expanded-keys="[2]"
>
<!-- :default-expanded-keys="[2]"是控制默认展开 权限的id为2 -->
</el-tree>
</el-form-item>
</template>
权限真正修改,携带选中的权限,发送请求给服务器
treeRef.value.getCheckedKeys()返回的是个数组,但是服务器要求传递的数据是string类型,使用JSON.stringify转换一下
javascript
// 拿到treeRef实例
const treeRef = ref()
// 表单提交校验
const confirm = async (formEl)=>{
if (!formEl) return
// 手动触发校验
await formEl.validate((valid, fields) => {
if (valid) {
// 通过校验
// 获得当前选中checkbox的权限
const permissions = JSON.stringify(treeRef.value.getCheckedKeys())
//携带的数据分别是权限组昵称,选中的权限,id
userSetmenu({name: form.name,permissions,id:form.id}).then(({data})=>{
console.log(data);
// 添加完成后关闭弹窗
beforeClose()
// 请求列表数据 刷新增加后的数据 并显示
getListData()
})
}else{
console.log('error submit!', fields)
}
})
}
添加该权限组后,请求现有的权限列表
javascript
// 请求列表数据会复用 在新增查询的时候 都会请求列表数据
const getListData = ()=>{
menuList(paginationData).then(({data})=>{
// 获得数据后给listdata 以列表形式显示
const {list,total} = data.data
tableData.list = list
tableData.total = total
})
}
上述步骤,已经创建了一个权限组,接下来需要在账号管理中,给当前用户绑定的具体的某个菜单权限组,最后可以根据权限设置动态路由,控制其访问权限。
接下来,讲讲如何给当前用户绑定菜单权限
查看接口文档,发现可以通过请求拿到权限列表信息,然后根据当前所选的权限id,获取权限组名
对用户的所属权限组进行修改,需要携带当前用户名和所属权限组id,一起发送请求修改
javascript
const options = ref([])
// 根据权限id匹配权限名称
const permissionName = (id)=>{
// 遍历optin数据里面的id 找到相同的id 获得他的权限name
const data = options.value.find(el=> el.id === id)
return data ? data.name :'dd'
}
javascript
...
const {name,permissions_id} = form
// 把当前获得的name,permissions_id发送修改用户信息的请求
updateUser({name,permissions_id}).then(({data})=>{
if(data.code === 10000){
// 修改成功关闭窗口
dialogFormVisible.value = false
// 重新获得更新后的列表数据
getListData()
}
})
...
所以就是将当前登录的账号用户名和权限组id作为一组信息绑定在一起,方便后面设置动态路由
that's all