【陪诊系统-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

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css