【发布时间】：2020-12-24 13:35:20
【问题描述】：
在我的 Vue.js 应用程序中，我使用导航抽屉来显示用户可以访问的不同页面。页面也只有在管理员激活了相关模块时才可见。因此，为每个页面和子页面设置了唯一的moduleID。该列表由filteredPages[] 填充。该数组是仅显示用户有权访问的页面的结果。所有可用页面都存储在我的原始数据源pages[]。
总结一下：只有当两个这两个条件都为true时才会显示一个页面：
-
activatedModules[]包含页面和子页面的moduleID。 -
userPermissions[]包含子代的permissions值（如果没有子代，则为页面）。
我的代码：
export default {
data: () => ({
pages: [
{
text: 'Team', moduleID: 'm1',
children: [
{ text: 'Dashboard', route:'team/dashboard', permissions: 'p101', moduleID: 'm1-1' },
],
},
{
text: 'Planner', moduleID: 'm2',
children: [
{ text: 'Events', route:'/planner/events', permissions: 'p201', moduleID: 'm2-1' },
{ text: 'Calendar', route:'/planner/calendar', permissions: 'p202', moduleID: 'm2-2' },
],
},
{
text: 'HR', moduleID: 'm3',
children: [
{ text: 'Staff', route:'/hr/staff', permissions: 'p301', moduleID: 'm3-1' },
{ text: 'Config', route:'/hr/config', permissions: 'p302', moduleID: 'm3-2' },
],
},
{
text: 'Admin', moduleID: 'm4',
children: [
{ text: 'Users', route:'/admin/users', permissions: 'p401', moduleID: 'm4-1' },
{ text: 'Security', route:'/admin/security', permissions: 'p402', moduleID: 'm4-2' },
],
},
{ text: 'Support', route:'/support', permissions: 'p50', moduleID: 'm5' },
],
activatedModules: ['m1', 'm1-1', 'm3', 'm3-1', 'm3-2' 'm4', 'm4-1', 'm4-2', 'm5'],
userPermissions: ['p101', 'p301', 'p302', 'p402', 'p50'],
// This is the source for my navigation drawer:
filteredPages: []
}),
computed: {
filterArray() {
// I tried to use filter() but how can I solve the rest?
this.filteredPages = this.pages.filter(function(item) {
for (var this.activatedModules in filter) {
if /* I would assume that I have to write the condition here */
return false;
}
return true;
})
}
}
}
对于上面的代码，这应该是输出：
filteredPages: [
{
text: 'Team', moduleID: 'm1',
children: [
{ text: 'Dashboard', route:'team/dashboard', permissions: 'p', moduleID: 'm1-1' },
],
},
// Notice that 'm2' is missing here because it is not in activatedModules[]
{
text: 'HR', moduleID: 'm3',
children: [
{ text: 'Staff', route:'/hr/staff', permissions: 'p301', moduleID: 'm3-1' },
{ text: 'Config', route:'/hr/config', permissions: 'p302', moduleID: 'm3-2' },
],
},
{
text: 'Admin', moduleID: 'm4',
children: [
// 'm4-1' is in activatedModules[] but the user doesn't have the permission 'p401' to view this
{ text: 'Security', route:'/admin/security', permissions: 'p402', moduleID: 'm4-2' },
],
},
{ text: 'Support', route:'/support', permissions: 'p50', moduleID: 'm5' },
]
用户的权限存储在 Firebase Cloud Firestore 中，如下所示：
你能帮忙过滤一下数组吗？
【问题讨论】：
-
你能补充一下
filterArray()在这个具体案例中应该返回的内容吗？ -
@trincot 我在这种情况下用输出更新了问题。
-
@tao 我的 Vue.js 应用程序非常复杂，现在几乎完成了。因此，我可能拥有某种知识，至少可以将项目推进到这个阶段。这些页面是在没有权限的情况下编码的。我之前用
filter()操作过数组，但是没有这种复杂性，也没有在网上找到能以正确方式帮助我解决这个问题的资源。 -
你的例子有问题。
p301在权限中，但您在输出中评论它不是。而对于p401，情况正好相反。哪里有错别字？ -
其实我才意识到这个错误，而且比我想象的要傻得多：你错误地写了
created而不是computed。我将删除我以前的 cmets。
标签： javascript arrays vue.js