权限管理：菜单管理

Posted 2023-05-01

参考技术A

权限管理是后台管理系统的核心功能，要给不同工作岗位的用户分配不同的操作权限，就需要进行权限管理

权限管理内部划分为：

控制登录到后台的用户能够访问到哪些后台菜单页面，比如负责广告的人员只能看到广告管理，课程人员只能看到课程管理，就需要进行不同的菜单权限分配

资源对应的是接口，资源权限用于控制用户能够操作哪些接口功能，比如分配资源权限的时候没有禁用用户权限，指的是没有操作这个接口的权限。资源权限与菜单权限不冲突，如果有的用户能够看到用户管理页面，也可以添加用户（有权限操作新增用户接口），但是没法进行禁用用户操作（无禁用用户的接口权限）

代表了菜单权限和资源权限的一种组合方式，比如我设置了多个用户需要相同的菜单权限和资源权限， 就可以将这些权限组合起来，设置为角色，再将角色分配给用户简化操作
在项目中，不会直接对某个用户进行菜单权限或者资源权限的分配，而是提前根据岗位清空设定不同的角色，再将角色分配给用户就可以了

用户需要分配角色，角色需要分配菜单权限和资源权限

由于功能之间存在依赖，我们先从菜单权限和资源权限功能开始制作，最后再依次完成角色和用户的功能

使用Element的 Card卡片
添加到views/menu/index.vue，将标题区域更改为添加菜单按钮，添加后跳转到菜单组件

在menu目录下创建menuCreate.vue，并且创建初始结构

在路由表中添加上去

下面通过Element的Card套Form的方式给menu-create布局

完成

上级菜单数据需要请求接口才能得到，并且要渲染到模板中
用于获取菜单的接口有两个

接下来是设置接口的请求方法

menuCreate.vue中请求数据

添加无上级菜单选项（如果你添加的是一级菜单的话就这么选）

首先要将用于添加菜单的请求功能封装到services/menu.js模块中，由于文件不存在，先进行创建

在createMenu.vue中引入并在在点击提交按钮时发送请求，顺便检验一下是否成功了，成功了要记得提示和跳转

展示数据相关列表，使用Element的 Table表格 组件进行处理，并且根据我们的项目功能，修改模板表格的内容

封装接口请求功能

引入并且请求数据，请求成功保存到data中

数据展示

操作部分的内容需要对Table进行自定义
注意：

点击删除的时候，提示用户确认，并且使用当前行数据信息进行删除请求

删除接口： 地址 ，使用Postman测试没问题之后投入使用

观察项目的时候发现，添加菜单和编辑菜单的组件结构几乎是一模一样的，可以封装为组件进行复用

去除menuCreate.vue中的多余内容

创建menuEdit.vue组件，设置内容

将菜单编辑添加到路由表中

给menu/index.vue中的编辑按钮设置点击后的路由跳转

开始之前补充一点，组件CreateOrEdit.vue中的重置按钮，应当设置一个全部清空重置的点击事件

编辑时，将要编辑的菜单项信息展示在表单中

由于添加和编辑时同一个接口，区别在于编辑时是否多了参数id，由于提交时传入为form数据，编辑提交时就会自动包含id，所以提交操作就不需要处理了

权限管理-菜单管理

#获取用户对应的职位 role_list = models.Role.objects.filter(role2userinfo__user=user.pk) #获取登陆用户的职位对应的权限表中的排除掉菜单的parent_id=None的数据 menu_leaf_list = models.Permission2Action.objects.filter(permission2action2role__role__in=role_list). exclude(url__menu__isnull=True).values("url__url","url__id", "url__title","url__menu").distinct() #创建空字典 menu_leaf_dict = {} #循环菜单中有parent_id的列表 for item in menu_leaf_list: #修改item字典数据名称并创建child空列表 item = { "id": item["url__id"], "url": item["url__url"], "title": item["url__title"], "parent_id": item["url__menu"], "child": [], } #如果menu_leaf_dict中包含parent_id就把数据添加到parent_id对应的列表中 if item["parent_id"] in menu_leaf_dict: menu_leaf_dict[item["parent_id"]].append(item) else: #如果不包含parent_id就在parent_id对应的values中创建一个空列表并把值添加到列表中 menu_leaf_dict[item["parent_id"]] = [item, ] for k,v in menu_leaf_dict.items(): print(k,v) # 获取菜单的值 menu_list = models.Menu.objects.values( "id", "title", "parent_id") # 创建空字典 menu_dict = {} #遍历menu_list的所有元素并且在每个元素下创建一个key为child value为[]的元素 for item1 in menu_list: item1["child"] = [] #以菜单列表的每个元素的id为key 每个元素为value添加到menu_dict字典中 menu_dict[item1["id"]] = item1 # 遍历menu_leaf_dict把value添加到menu_dict的key相同的元素下 for k, v in menu_leaf_dict.items(): menu_dict[k]["child"] = v result = [] # 遍历menu_dict的value也可以使用for row in menu_list获取每个菜单的所有元素 for row in menu_dict.values(): if row["parent_id"]: #如果value中parent_id不为None就把这个value添加到每个元素的parent_id和menu_dict[row[]"parent_id]相 # 对应的child列表中 menu_dict[row["parent_id"]]["child"].append(row) else: #如果parent_id为None就把值添加到result中,因为根菜单的paient_id都为None所以会先添加根菜单到result中 # 不需要把所有的元素都添加到child中因为列表和字典都是引用类型,所有的元素都会根据内存地址引用到相对应的 # 根菜单中 result.append(row)