2024年最全Vue角色的权限管理_vue角色权限，社招面试题

2401_84436058

于 2024-05-14 12:25:48 发布

阅读量287

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84436058/article/details/138849428

版权

程序员专栏收录该内容

167 篇文章 0 订阅

订阅专栏

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

思路：

给角色分配好权限后，将这些权限分别转为字符串形式，不同权限之间用英文逗号分开

当点击“分配权限”的时候，把角色id存到 roleId中
点击“确定”按钮后，将选中的权限转为数组，将得到的数组拼接为字符串

样式：

<!-- 底部的按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <!-- 点击按钮时 对话框隐藏 -->
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="allotRights">确 定</el-button>
      </span>

数据：

data() {
    return {
      // 所有角色列表数据
      roleList: [],
      // 控制分配权限对话框的显示与隐藏
      setRightDialogVisible: false,
      // 所有权限的数据
      rightslist: [],
      // 树形控件的属性绑定规则
      treeProps: {
        label: 'authName',
        children: 'children',
      },
      // 默认选中的节点Id值数组
      // []里面是Id值
      defKeys: [],
      // 当前即将分配权限的角色id
      roleId: '',
      // 控制 添加角色对话框 的 显示与隐藏
      addDialogVisible: false,
      // 控制 修改角色对话框 的 显示与隐藏
      editDialogVisible: false,
      // 查询到的角色信息对象
      editForm: {},
      addForm: {
        roleId: '',
        roleName: '',
        roleDesc: '',
      },
    }
  }

逻辑：

// 获取所有角色的列表
    async getRolesList() {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }
      this.roleList = res.data
      console.log(this.roleList)
    },
// 点击给角色分配权限
    async allotRights() {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys(),
      ]
      // 点击“确定”按钮后，将选中的权限 转为 数组，将得到的数组拼接为字符串
      const idStr = keys.join(',')
      const { data: res } = await this.$http.post(
        `roles/${this.roleId}/rights`,
        { rids: idStr }
      )
      if (res.meta.status !== 200) {
        return this.$message.error('分配权限失败！')
      }
      this.$message.success('分配权限成功！')
      this.getRolesList()
      this.setRightDialogVisible = false
    },

分配角色功能的实现

样式：

<!-- 分配权限的对话框 -->
    <el-dialog
 title="分配权限"
 :visible.sync="setRightDialogVisible"
 width="50%"
 >
      <!-- 树形控件 -->
      <!-- show-checkbox 复选框 -->
      <!-- node-key="id" 选中某个复选框，选中的是这个复选框中内容的id -->
      <!-- default-expand-all 默认展开所有结点 -->
      <el-tree
 :data="rightslist"
 :props="treeProps"
 show-checkbox
 node-key="id"
 default-expand-all
 ></el-tree>

      <!-- 底部的按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <!-- 点击按钮时 对话框隐藏 -->
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRightDialogVisible = false"
 >确 定</el-button
 >
        <!-- <el-button type="primary">确 定</el-button> -->
      </span>
    </el-dialog>

<script>
export default {
  data() {
    return {
      // 所有角色列表数据
      roleList: [],
      // 控制分配权限对话框的显示与隐藏
      setRightDialogVisible: false,
      // 所有权限的数据
      rightslist: [],
      // 树形控件的属性绑定规则
      treeProps: {
        label: 'authName',
        children: 'children',
      },

      // 控制 添加角色对话框 的 显示与隐藏
      addDialogVisible: false,
      // 控制 修改角色对话框 的 显示与隐藏
      editDialogVisible: false,
      // 查询到的角色信息对象
      editForm: {},
      addForm: {
        roleId: '',
        roleName: '',
        roleDesc: '',
      },
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // 获取所有角色的列表
    async getRolesList() {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }
      this.roleList = res.data
      console.log(this.roleList)
    },

  // 展示分配权限的对话框
    async showSetRightDialg() {
      // 获取所有权限的数据
      const { data: res } = await this.$http.get('rights/tree')
      if (res.meta.status !== 200) {
        return this.message.error('获取权限数据失败')
      }
      // 数据获取成功
      // 把获取到的权限数据保存到 data 中
      this.rightslist = res.data
      console.log(this.rightslist)
      this.setRightDialogVisible = true
    },

  },
}
</script>

在这里插入图片描述

<!-- 分配权限的对话框 -->
    <!-- @close="setRightDialogClosed" 关闭权限管理对话框的时候，将defKeys数组清空 -->
    <el-dialog
 title="分配权限"
 :visible.sync="setRightDialogVisible"
 width="50%"
 @close="setRightDialogClosed"
 >

<!-- 树形控件 -->
      <!-- show-checkbox 复选框 -->
      <!-- node-key="id" 选中某个复选框，选中的是这个复选框中内容的id -->
      <!-- default-expand-all 默认展开所有结点 -->
      <!-- :default-checked-keys="defKeys" 默认勾选 -->
      <el-tree
 :data="rightslist"
 :props="treeProps"
 show-checkbox
 node-key="id"
 default-expand-all
 :default-checked-keys="defKeys"
 ></el-tree>

<script>
export default {
  data() {
    return {
      // 所有角色列表数据
      roleList: [],
      // 控制分配权限对话框的显示与隐藏
      setRightDialogVisible: false,
      // 所有权限的数据
      rightslist: [],
      // 树形控件的属性绑定规则
      treeProps: {
        label: 'authName',
        children: 'children',
      },
      // 默认选中的节点Id值数组
      // []里面是Id值
      defKeys: [],

      // 控制 添加角色对话框 的 显示与隐藏
      addDialogVisible: false,
      // 控制 修改角色对话框 的 显示与隐藏
      editDialogVisible: false,
      // 查询到的角色信息对象
      editForm: {},
      addForm: {
        roleId: '',
        roleName: '',
        roleDesc: '',
      },
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // 获取所有角色的列表
    async getRolesList() {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }
      this.roleList = res.data
      console.log(this.roleList)
    },
    // 展示分配权限的对话框
    async showSetRightDialg(role) {
      // 获取所有权限的数据
      const { data: res } = await this.$http.get('rights/tree')
      if (res.meta.status !== 200) {
        return this.message.error('获取权限数据失败')
      }
      // 数据获取成功
      // 把获取到的权限数据保存到 data 中
      this.rightslist = res.data
      console.log(this.rightslist)
      // 递归获取三级权限的id
      this.getLeafKeys(role, this.defKeys)
      // 显示权限管理的对话框
      this.setRightDialogVisible = true
    },
    // 通过递归的形式，获取到角色下所有三级权限的id,并保存到 defKeys 数组中
    getLeafKeys(node, arr) {
      // 如果当前 node 节点不包含children属性，则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach((item) => {
        this.getLeafKeys(item, arr)
      })
    },
    // 监听分配权限对话框的关闭事件
    setRightDialogClosed() {
      this.defKeys = []
    }
  }
}

接口

删除角色指定权限的接口

请求路径：roles/:roleId/rights/:rightId
请求方法：delete
请求参数

参数名	参数说明	备注
:roleId	角色 ID	不能为空`携带在url中`
:rightId	权限 ID	不能为空`携带在url中`

响应数据说明
- 返回的data, 是当前角色下最新的权限数据
响应数据

{
    "data": [
        {
            "id": 101,
            "authName": "商品管理",
            "path": null,
            "children": [
                {
                    "id": 104,
                    "authName": "商品列表",
                    "path": null,
                    "children": [
                        {
                            "id": 105,
                            "authName": "添加商品",
                            "path": null
                        },
                        {
                            "id": 116,
                            "authName": "修改",
                            "path": null
                        }
                    ]
                }
            ]
        }
    ],
    "meta": {
        "msg": "取消权限成功",
        "status": 200
    }
}

所有权限列表接口

请求路径：rights/:type
请求方法：get
请求参数

参数名	参数说明	备注
type	类型	值 list 或 tree , list 列表显示权限, tree 树状显示权限,`参数是url参数:type`

响应参数

参数名	参数说明	备注
id	权限 ID
authName	权限说明
level	权限层级
pid	权限父 ID
path	对应访问路径

响应数据 type=list

  {
    "data": [
        {
            "id": 101,
            "authName": "商品管理",
            "level": "0",
            "pid": 0,
            "path": null
        },
        {
            "id": 102,
            "authName": "订单管理",
            "level": "0",
            "pid": 0,
            "path": null


### 最后

**一个好的心态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**分享一些前端面试题以及学习路线给大家**

![](https://img-blog.csdnimg.cn/img_convert/6f91415e2573eefe44db4f3a26190d2c.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/ec781adafff10cb6fcd979f7ebf17bd9.webp?x-oss-process=image/format,png)

"authName": "订单管理",
            "level": "0",
            "pid": 0,
            "path": null


### 最后

**一个好的心态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**分享一些前端面试题以及学习路线给大家**

[外链图片转存中...(img-9USzXNFl-1715660723981)]

[外链图片转存中...(img-RGZWQsSa-1715660723982)]

2401_84436058

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
2024年最全Vue角色的权限管理_vue角色权限，社招面试题

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】思路：给角色分配好权限后，将这些权限分别转为字符串形式，不同权限之间用英文逗号分开当点击“分配权限”的时候，把角色id存到 roleId中点击“确定”按钮后，将选中的权限转为数组，将得到的数组拼接为字符串-- 底部的按钮区域 -->-- 点击按钮时对话框隐藏 -->
复制链接

扫一扫