当前位置：首页 > article >正文

【陪诊系统-PC管理端】菜单权限和账号绑定

article 2025/3/19 23:39:54

这篇博文的菜单权限按道理来说应该放在这个系列更新的第二篇~but，我想把菜单权限和账号管理一起分析

在菜单管理页面中，设置的不同权限，要判断当前这组的选中权限是哪些
在这里插入图片描述
需要保存在当前对话框中选中的权限，因为后续通过请求真正添加时需要携带参数，所以给这个树形结构定义了一个ref属性，为了拿到tree组件实例。tree组件自身有一些方法可以拿到节点数据，如：treeRef.value.getCheckedKeys()

<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转换一下

// 拿到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)
    }
  })
}

~~添加该权限组后，请求现有的权限列表~~

// 请求列表数据会复用 在新增查询的时候 都会请求列表数据
const getListData = ()=>{
  menuList(paginationData).then(({data})=>{
    // 获得数据后给listdata 以列表形式显示
    const {list,total} = data.data
    tableData.list = list
    tableData.total = total
  })
}

上述步骤，已经创建了一个权限组，接下来需要在账号管理中，给当前用户绑定的具体的某个菜单权限组，最后可以根据权限设置动态路由，控制其访问权限。

接下来，讲讲如何给当前用户绑定菜单权限

查看接口文档，发现可以通过请求拿到权限列表信息，然后根据当前所选的权限id，获取权限组名
在这里插入图片描述

对用户的所属权限组进行修改，需要携带当前用户名和所属权限组id，一起发送请求修改

在这里插入图片描述

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'
}

...
const {name,permissions_id} = form
// 把当前获得的name,permissions_id发送修改用户信息的请求
updateUser({name,permissions_id}).then(({data})=>{
        if(data.code === 10000){
          // 修改成功关闭窗口
          dialogFormVisible.value = false
          // 重新获得更新后的列表数据
          getListData()
        }
      })
 ...