菜单权限
    <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号
浙公网安备 33010602011771号