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

相关推荐
小行星1259 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12515 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00125 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果40 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9643 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron
yqcoder1 小时前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端