javascript - 比较多维数组并向每个子元素添加属性，即使在子数组中也是如此
问题描述
我正在处理我的应用程序的许可部分。我实际上正在构建一个由其他人制作的 Laravel 后端提供的 vue 应用程序。现在我有点卡住了如何检查权限是否被检查并且在角色下处于活动状态。一个权限可以属于一个角色，所以在制作一个角色的时候，我要检查哪些权限属于这个角色。
因此，首先我获得了数组中的所有权限。这将是一个具有 3 个父权限的数组，具有自己的子权限，依此类推，例如 4 倍深度。
权限
{
"data": [
{
"id": 1,
"name": "Suppliers management module",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "suppliersManagementModule",
"guard_name": "web",
"_lft": 1,
"_rgt": 34,
"parent_id": null,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": [
{
"id": 2,
"name": "Suppliers management module settings",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "suppliersManagementModule.settings",
"guard_name": "web",
"_lft": 2,
"_rgt": 33,
"parent_id": 1,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": [
{
"id": 3,
"name": "Supplier types",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "suppliersManagementModule.settings.supplierTypes",
"guard_name": "web",
"_lft": 3,
"_rgt": 12,
"parent_id": 2,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": [
{
"id": 4,
"name": "Create supplier types",
"description": "This permission allows the user to create supplier types",
"translation_key": "suppliersManagementModule.settings.supplierTypes.create",
"guard_name": "web",
"_lft": 4,
"_rgt": 5,
"parent_id": 3,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": []
},
{
"id": 5,
"name": "Read supplier types",
"description": "This permission allows the user to read supplier types",
"translation_key": "suppliersManagementModule.settings.supplierTypes.read",
"guard_name": "web",
"_lft": 6,
"_rgt": 7,
"parent_id": 3,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": []
},
{
"id": 6,
"name": "Update supplier types",
"description": "This permission allows the user to update supplier types",
"translation_key": "suppliersManagementModule.settings.supplierTypes.update",
"guard_name": "web",
"_lft": 8,
"_rgt": 9,
"parent_id": 3,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": []
},
{
"id": 7,
"name": "Delete supplier types",
"description": "This permission allows the user to delete supplier types",
"translation_key": "suppliersManagementModule.settings.supplierTypes.delete",
"guard_name": "web",
"_lft": 10,
"_rgt": 11,
"parent_id": 3,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": []
}
]
},
{
"id": 8,
"name": "Suppliers management module sections",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "suppliersManagementModule.settings.sections",
"guard_name": "web",
"_lft": 13,
"_rgt": 22,
"parent_id": 2,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": [
{
"id": 9,
"name": "Suppliers management module create sections",
"description": "This permission allows the user to create suppliers management module sections",
"translation_key": "suppliersManagementModule.settings.sections.create",
"guard_name": "web",
"_lft": 14,
"_rgt": 15,
"parent_id": 8,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": []
},
{
"id": 10,
"name": "Suppliers management module read sections",
"description": "This permission allows the user to read suppliers management module sections",
"translation_key": "suppliersManagementModule.settings.sections.read",
"guard_name": "web",
"_lft": 16,
"_rgt": 17,
"parent_id": 8,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": []
},
{
"id": 11,
"name": "Suppliers management module update sections",
"description": "This permission allows the user to update suppliers management module sections",
"translation_key": "suppliersManagementModule.settings.sections.update",
"guard_name": "web",
"_lft": 18,
"_rgt": 19,
"parent_id": 8,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": []
},
{
"id": 12,
"name": "Suppliers management module delete sections",
"description": "This permission allows the user to delete suppliers management module sections",
"translation_key": "suppliersManagementModule.settings.sections.delete",
"guard_name": "web",
"_lft": 20,
"_rgt": 21,
"parent_id": 8,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": []
}
]
},
{
"id": 13,
"name": "Suppliers management module labels",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "suppliersManagementModule.settings.labels",
"guard_name": "web",
"_lft": 23,
"_rgt": 32,
"parent_id": 2,
"created_at": "2018-06-14 15:58:42",
"updated_at": "2018-06-14 15:58:42",
"children": [
{
"id": 14,
"name": "Suppliers management module create labels",
"description": "This permission allows the user to create suppliers management module labels",
"translation_key": "suppliersManagementModule.settings.labels.create",
"guard_name": "web",
"_lft": 24,
"_rgt": 25,
"parent_id": 13,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 15,
"name": "Suppliers management module read labels",
"description": "This permission allows the user to read suppliers management module labels",
"translation_key": "suppliersManagementModule.settings.labels.read",
"guard_name": "web",
"_lft": 26,
"_rgt": 27,
"parent_id": 13,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 16,
"name": "Suppliers management module update labels",
"description": "This permission allows the user to update suppliers management module labels",
"translation_key": "suppliersManagementModule.settings.labels.update",
"guard_name": "web",
"_lft": 28,
"_rgt": 29,
"parent_id": 13,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 17,
"name": "Suppliers management module delete labels",
"description": "This permission allows the user to delete suppliers management module labels",
"translation_key": "suppliersManagementModule.settings.labels.delete",
"guard_name": "web",
"_lft": 30,
"_rgt": 31,
"parent_id": 13,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
}
]
}
]
}
]
},
{
"id": 18,
"name": "Relations module",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "relationsModule",
"guard_name": "web",
"_lft": 35,
"_rgt": 46,
"parent_id": null,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": [
{
"id": 19,
"name": "Relations",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "relationsModule.relations",
"guard_name": "web",
"_lft": 36,
"_rgt": 45,
"parent_id": 18,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": [
{
"id": 20,
"name": "Create relations",
"description": "This permission allows the user to create relations",
"translation_key": "relationsModule.relations.create",
"guard_name": "web",
"_lft": 37,
"_rgt": 38,
"parent_id": 19,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 21,
"name": "Read relations",
"description": "This permission allows the user to read relations",
"translation_key": "relationsModule.relations.read",
"guard_name": "web",
"_lft": 39,
"_rgt": 40,
"parent_id": 19,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 22,
"name": "Update relations",
"description": "This permission allows the user to update relations",
"translation_key": "relationsModule.relations.update",
"guard_name": "web",
"_lft": 41,
"_rgt": 42,
"parent_id": 19,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 23,
"name": "Delete relations",
"description": "This permission allows the user to delete relations",
"translation_key": "relationsModule.relations.delete",
"guard_name": "web",
"_lft": 43,
"_rgt": 44,
"parent_id": 19,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
}
]
}
]
},
{
"id": 24,
"name": "Settings",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "settings",
"guard_name": "web",
"_lft": 47,
"_rgt": 68,
"parent_id": null,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": [
{
"id": 25,
"name": "Languages",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "settings.languages",
"guard_name": "web",
"_lft": 48,
"_rgt": 57,
"parent_id": 24,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": [
{
"id": 26,
"name": "Create languages",
"description": "This permission allows the user to create languages",
"translation_key": "settings.languages.create",
"guard_name": "web",
"_lft": 49,
"_rgt": 50,
"parent_id": 25,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 27,
"name": "Read languages",
"description": "This permission allows the user to read languages",
"translation_key": "settings.languages.read",
"guard_name": "web",
"_lft": 51,
"_rgt": 52,
"parent_id": 25,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 28,
"name": "Update languages",
"description": "This permission allows the user to update languages",
"translation_key": "settings.languages.update",
"guard_name": "web",
"_lft": 53,
"_rgt": 54,
"parent_id": 25,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 29,
"name": "Delete languages",
"description": "This permission allows the user to delete languages",
"translation_key": "settings.languages.delete",
"guard_name": "web",
"_lft": 55,
"_rgt": 56,
"parent_id": 25,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
}
]
},
{
"id": 30,
"name": "Roles",
"description": "This permission allows the user to access the underlying permissions",
"translation_key": "settings.roles",
"guard_name": "web",
"_lft": 58,
"_rgt": 67,
"parent_id": 24,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": [
{
"id": 31,
"name": "Create roles",
"description": "This permission allows the user to create roles",
"translation_key": "settings.roles.create",
"guard_name": "web",
"_lft": 59,
"_rgt": 60,
"parent_id": 30,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 32,
"name": "Read roles",
"description": "This permission allows the user to read roles",
"translation_key": "settings.roles.read",
"guard_name": "web",
"_lft": 61,
"_rgt": 62,
"parent_id": 30,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 33,
"name": "Update roles",
"description": "This permission allows the user to update roles",
"translation_key": "settings.roles.update",
"guard_name": "web",
"_lft": 63,
"_rgt": 64,
"parent_id": 30,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
},
{
"id": 34,
"name": "Delete roles",
"description": "This permission allows the user to delete roles",
"translation_key": "settings.roles.delete",
"guard_name": "web",
"_lft": 65,
"_rgt": 66,
"parent_id": 30,
"created_at": "2018-06-14 15:58:43",
"updated_at": "2018-06-14 15:58:43",
"children": []
}
]
}
]
}
]
}
当我尝试检索角色时，我还将获得属于该角色的权限。所以现在，我必须从所有权限列表中检查哪些权限已经包含在角色中，哪些没有。
比较两个数组的最佳方法是什么？到目前为止我已经尝试过：
// Set the array with permissions
this.permissions = response.data.data;
// Push all permissions in one array
this.permissions.forEach((element) => {
this.AllPermissions.push(element);
element.children.forEach((one) => {
this.AllPermissions.push(one);
one.children.forEach((two) => {
this.AllPermissions.push(two);
two.children.forEach((three) => {
this.AllPermissions.push(three);
});
});
});
});
// Push the id's of the permissions of a role to an array
this.role.permissions.forEach((element) => {
this.permissionsNumbers.push(element.id);
});
// Check for each permission if a permission belongs to the role
this.AllPermissions.forEach((item) => {
if (this.permissionsNumbers.includes(item.id)) {
item.check = 1;
} else {
item.check = 0;
}
});
但不知为何，这感觉真的很奇怪。例如，我做了 4 个foreach循环，因为大约有 4 个子数组，但是当我添加另一个子数组时会发生什么？比我必须手动添加另一个foreach循环。另外，现在我将属于一个角色的权限作为一个大数组获得。相反，我想把它作为一个带有子数组等的数组。我如何通过比较而不是一个带有项目的大列表来管理它？
无论如何感谢您提前提供帮助，当事情不完全清楚时，请随时提出问题。
解决方案
我把它放在一起来说明递归调用数组，还记得在 javascript 中对象总是通过引用传递，所以你可以在迭代和使用原始数组时编辑它们。我不知道您的课程实际上是如何构建的，因此这可能需要一些调整才能使其正常工作。
class permHelper{
constructor(permissions, role){
this.permissionsNumbers = [];
this.role = role;
this.role.permissions.forEach((element) => {
this.permissionsNumbers.push(element.id);
});
this.AllPermissions = this.getPermissions(permissions);
}
getPermissions(perms, parentChecked){
perms.forEach((perm) => {
if(hasPerm){
//parentChecked is sent in when the parent permission
//was valid so we know all children are valid
perm.check = 1;
}else if(this.permissionsNumbers.includes(perm.id)){
//If the parent wasn't valid, or this is the top level,
//check agains the permissions on the role
perm.check = 1;
}else{
//If the role doesn't have this permission or one of its
//ancestors permissions, this one isn't valid either
perm.check = 0;
}
//If this permission has children, run them through also
if(typeof perm.children != 'undefined') this.getPermissions(perm.children, perm.check);
});
//Return the altered array
return perms;
}
}
如果您希望 AllPermissions 是一个数组，则只包含有效权限：
class permHelper{
constructor(permissions, role){
this.AllPermissions = [];
this.permissionsNumbers = [];
this.role = role;
this.role.permissions.forEach((element) => {
this.permissionsNumbers.push(element.id);
});
this.getPermissions(permissions);
}
getPermissions(perms){
perms.forEach((perm) => {
if(this.permissionsNumbers.includes(perm.id)){
this.AllPermissions.push(perm);
}else{
//If the role doesn't have this permission this one isn't valid
if(typeof perm.children != 'undefined') this.getPermissions(perm.children, perm.check);
}
});
}
}
推荐阅读
- angular - 如果服务器是 Spring，如何在 Angular 中渲染？
- c - 使用 memfd_create 和 fexecve 从内存运行 ELF
- r - 有没有办法在同一个图上绘制点和线？
- c# - 为什么这会给我一个 for 循环变量中的范围错误
- python - 在 Django 中安排文件下载
- flutter - Flutter 自定义画家剪影
- c# - 如何为 Unity 3D 修复此脚本
- javascript - 为什么一个简单的 React 组件会渲染两次？
- excel - Excel有没有办法选择一个类别中最大的两个项目，然后减去它们？
- c# - WPF 中用于导出包含许多项目的 ListBox 控件内容的解决方案