在我的 Vue.js 应用程序中，我使用导航抽屉来显示用户有权访问的不同页面。仅当管理员激活相关模块时，页面才可见。moduleID因此，为每个页面和子页面设置了唯一的。该列表由 填充filteredPages[]。该数组是仅显示用户有权访问的页面的结果。所有可用的页面都存储在我的原始数据源中pages[]。总结一下：仅当这两个条件都成立时才会显示页面：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: [] }),
3 回答
凤凰求蛊
TA贡献1825条经验 获得超4个赞
这应该可以做到：
computed: {
filteredPages() {
return this.pages.map(page => ({
...page,
children: page.children
// when children is truthy
? page.children.filter(
// filter out those not in `userPermissions`
child => this.userPermissions.includes(child.permissions)
// and those not in `activatedModules`
&& this.activatedModules.includes(child.moduleID)
)
: page.children
})).filter(
// only keep page if in `activatedModules` and...
page => (this.activatedModules.includes(page.moduleID)) &&
// if children is truthy and has length or...
(page.children?.length || (
// if children is falsy and page.permissions in userPermissions
!page.children && this.userPermissions.includes(page.permissions)
))
);
}
}
看看它的工作原理：
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
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']
}),
computed: {
filteredPages() {
return this.pages.map(page => ({
...page,
children: page.children
? page.children.filter(
child => this.userPermissions.includes(child.permissions)
&& this.activatedModules.includes(child.moduleID)
)
: page.children
})).filter(
page => (this.activatedModules.includes(page.moduleID))
&& (page.children?.length || (
!page.children && this.userPermissions.includes(page.permissions)
))
);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<pre v-html="filteredPages" />
</div>
牧羊人nacy
TA贡献1862条经验 获得超7个赞
一些备注：
您不应该使用
functionfor 回调，就像您开始为 for 所做的那样filter，因为这会让您失去正确的this值。使用箭头函数。filter无法单独完成这项工作，因为您还需要生成可能具有较少子对象的新对象。所以你应该首先map制作那些缩小范围的对象，然后filter。
在不使用 Vue 的情况下，您可以运行以下代码片段，该代码片段只是将调用硬编码为filterArray：
let app = {
computed: {
filterArray() {
this.filteredPages = this.pages.map(item => {
let children = (item.children || []).filter(child =>
this.activatedModules.includes(child.moduleID) &&
this.userPermissions.includes(child.permissions)
);
return (children.length || !item.children)
&& this.activatedModules.includes(item.moduleID)
&& {...item, children};
}).filter(Boolean);
}
},
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'],
filteredPages: []
}),
};
// Demo, simulate Vue's call to computed.filterArray
let data = app.data();
app.computed.filterArray.call(data);
// Verify output:
console.log(data.filteredPages);
达令说
TA贡献1821条经验 获得超6个赞
在下面的代码片段中，我首先使用过滤器来过滤，activatedModules然后使用 aforEach来过滤每个对象children属性userPermissions，我认为你可以在你的 vue 组件中实现它，或者了解如何解决这个问题（希望这有帮助）：
const pages = [{
text: 'Team',
moduleID: 'm1',
children: [{
text: 'Dashboard',
route: 'team/dashboard',
permissions: 'p1382',
moduleID: 'm1-1'
}, ],
},
{
text: 'Planner',
moduleID: 'm2',
children: [{
text: 'Events',
route: '/planner/events',
permissions: 'p47289',
moduleID: 'm2-1'
},
{
text: 'Calendar',
route: '/planner/calendar',
permissions: 'p283',
moduleID: 'm2-2'
},
],
},
{
text: 'HR',
moduleID: 'm3',
children: [{
text: 'Staff',
route: '/hr/staff',
permissions: 'p34729',
moduleID: 'm3-1'
},
{
text: 'Config',
route: '/hr/config',
permissions: 'p382',
moduleID: 'm3-2'
},
],
},
{
text: 'Admin',
moduleID: 'm4',
children: [{
text: 'Users',
route: '/admin/users',
permissions: 'p3z4',
moduleID: 'm4-1'
},
{
text: 'Security',
route: '/admin/security',
permissions: 'p2u3',
moduleID: 'm4-2'
},
],
},
{
text: 'Support',
route: '/support',
permissions: 'p332j',
moduleID: 'm5'
},
];
const activatedModules = ['m1', 'm3', 'm4', 'm5'];
const userPermissions = ['m1-1', 'm3-1', 'm3-2', 'm4-2'];
// This is the source for my navigation drawer:
let filteredPages = null;
filteredPages = pages.filter(x => activatedModules.includes(x.moduleID));
filteredPages.forEach(x => {
if (x.children)
x.children = x.children.filter(y => userPermissions.includes(y.moduleID));
});
console.log(filteredPages);
添加回答
举报
0/150
提交
取消