菜单权限
<el-menu
:default-active="activePath"
class="el-menu-vertical-demo"
:class="isCollapse ? 'isCollapse_menu' : ''"
router
active-text-color="#fff"
text-color="#fff"
background-color="#ffffff00"
>
<div v-for="(item, index) in menuList" :key="index" class="fold_box">
<template v-if="item.children">
<el-sub-menu v-if="item.isAdmin" :index="item.path" popper-class="div_box_box">
<template #title>
<img :src="item.icon" alt="" />
<span v-show="!isCollapse">{{ item.meta.name }}</span>
</template>
<template v-for="(items, indexs) in item.children" :key="indexs">
<el-menu-item v-if="items.isAdmin" :index="items.path">
<p v-show="!isCollapse" v-if="items.isAdmin" class="trns">
<span class="point"></span>
<span class="menu_name">{{ items.meta.name }}</span>
</p>
<n-popover v-if="isCollapse" placement="right" trigger="click">
<template #trigger>
<p class="trns trns_bg">
<span class="point"></span>
</p>
</template>
<p>{{ items.meta.name }}</p>
</n-popover>
</el-menu-item>
</template>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="item.path" style="height: 48px; padding-left: 12px">
<img :src="item.icon" alt="" />
<span v-show="!isCollapse" class="menu_name">{{ item.meta.name }}</span>
</el-menu-item>
</template>
</div>
</el-menu>
menuList.forEach((item: any) => {
if (item.name === 'setUp') {
// getItem(USERRESULT).superFlag 获取store中存储的superFlag属性 superFlag为true为管理员反之不是
item.isAdmin = getItem(USERRESULT).superFlag
} else {
item.isAdmin = true
}
if (item.children) {
item.children.forEach((items: any) => {
if (items.name === 'reply') {
// getItem(USERRESULT).superFlag 获取store中存储的superFlag属性 superFlag为true为管理员反之不是
items.isAdmin = getItem(USERRESULT).superFlag
} else {
items.isAdmin = true
}
})
}
})
// setUp reply 需要控制的菜单
核心: 为菜单每一项添加一个isAdmin属性,需要控制的菜单通过后端返回的superFlag动态设置true或false,不需要的则默认为true,在渲染菜单时通过v-if判断isAdmin来实现菜单的显示或者隐藏
另外一种方案:
在router.js设置路由时,通过meta源信息设置当前菜单显示的权限名称,通过beforEach路由守卫去获取源信息,在通过后端返回的权限数组比对,若存在调用next()下一步,若不存在,导航到事先准备的报错页面

浙公网安备 33010602011771号