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

这篇博文的菜单权限按道理来说应该放在这个系列更新的第二篇~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

相关推荐
草梅友仁7 小时前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古7 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan7 小时前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥7 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程7 小时前
深入JS(一):手写 Promise
前端·javascript
Hierifer8 小时前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_8 小时前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工9 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
半夏陌离9 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰9 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite