基于角色本地存储的侧边栏

Question

我找到了一个基于登录角色隐藏一些侧边栏菜单的解决方案，我有 3 个角色，1 个用于管理员，2 个用于助手，3 个用于驱动程序下面是我的模板代码

`

<div class="sidebar px-0">
  <div class="user-panel mt-3 pb-3 mb-3 d-flex">
    <div class="image">
      <img
        src="../assets/images/user.jpg"
        class="img-circle elevation-2"
        alt="User Image"
      />
    </div>
    <div class="info">
      <a href="#" class="d-block">
        <b>{{ username }}</b>
      </a>
    </div>
  </div>

  <!-- List menu on sidebar -->
  <nav class="mt-2">
    <ul
      class="nav nav-sidebar flex-column"
      data-widget="treeview"
      data-accordion="false"
    >
      <li v-for="menu in menus" :key="menu.title" :class="menu.class">
        <router-link class="pl-3" :to="menu.link" :class="activeClass(menu.key)">
          <i style="font-size: .875rem;" :class="`nav-icon fa ${menu.icon} mr-2`"/>
          <p>
            {{ menu.title }}
            <i v-if="menu.submenus" class="right fa fa-angle-left"></i>
          </p>
        </router-link>
        <ul v-if="menu.submenus" class="nav nav-treeview">
          <li v-for="submenu in menu.submenus" :key="submenu.title" class="nav-item">
            <router-link class="pl-5" :to="submenu.link" :class="activeClass(submenu.key)">

              <p class="pl-2">{{ submenu.title }}</p>
            </router-link>
          </li>
        </ul>
      </li> 

    </ul>
  </nav>
</div>

`

我开始为声明侧边栏菜单列表编写脚本，在下面的代码中，我希望部分算法侧边栏菜单仅在角色 2 中显示，但没有任何反应

<script>
import { mapState } from 'vuex'
import Logo from '@/assets/images/logo.svg'
import Avatar from '@/assets/images/avatar.png'
import LocalStorage from '../helpers/localStorage'

export default {
  data() {
    return {
      Avatar,
      username: LocalStorage.getUser().profile.name,
      menus: [
      {
        icon: 'fa-tachometer-alt',
        title: 'Dashboard',
        key: 'dashboard',
        link: '/',
        class: 'nav-item'
      },
      {
        icon: 'fa-calculator',
        title: 'Estimation',
        link: '#',
        key: 'estimation',
        class: 'nav-item has-treeview',
        submenus: [
          {
            icon: 'fa-circle',
            title: 'Source',
            key: 'source',
            link: '/estimation/source'

          },
          {
            icon: 'fa-circle',
            title: 'Destination',
            key: 'destination',
            link: '/estimation/destination'
          },
          {
            icon: 'fa-circle',
            title: 'Fleet',
            key: 'asset',
            link: '/estimation/asset'
          }
        ]
      },
      {
        icon: 'fa-money-bill',
        title: 'Delivery Order',
        link: '/delivery-order',
        key: 'delivery-order',
        class: 'nav-item'
      },
      {
        icon: 'fa-table',
        title: 'Schedule',
        key: 'schedule',
        link: '#',
        class: 'nav-item has-treeview',
        submenus: [
          {
            icon: 'fa-circle',
            title: 'Summary Planning',
            key: 'schedule/summary-planning',
            link: '/schedule/summary'
          },
          {
            icon: 'fa-circle',
            title: 'Plan & Monitoring',
            key: 'schedule/plan-monitoring',
            link: '/schedule/plan-monitoring'
          },
          {
            icon: 'fa-circle',
            title: 'Algo Testing',
            key: 'schedule/algo-testing',
            link: '/schedule/algo-testing'
          }
        ]
      },
      {
        icon: 'fa-user',
        title: 'User Management',
        key: 'user',
        link: '/users',
        class: 'nav-item'
      },
      {
        icon: 'fa-database',
        title: 'Master Data',
        key: 'master',
        link: '#',
        class: 'nav-item has-treeview',
        submenus: [
          {
            icon: 'fa-circle',
            title: 'Transport',
            key: 'transport',
            link: '/master/transports'
          },
          {
            icon: 'fa-circle',
            title: 'Mills',
            key: 'mills',
            link: '/master/mills'
          },
          {
            icon: 'fa-circle',
            title: 'Destination',
            key: 'destinations',
            link: '/master/destinations'
          },
          {
            icon: 'fa-circle',
            title: 'Ship',
            key: 'ship',
            link: '/master/ships'
          },
          {
            icon: 'fa-circle',
            title: 'Trucks',
            key: 'trucks',
            link: '/master/trucks'
          },
          {
            icon: 'fa-circle',
            title: 'Group',
            key: 'group',
            link: '/master/groups'
          }
        ]
      },
      {
        icon: 'fa-cogs',
        title: 'Configuration',
        key: 'configuration',
        link: '#',
        class: 'nav-item has-treeview',
        submenus: [
          {
            icon: 'fa-circle',
            title: 'Trip',
            key: 'trip',
            link: '/configuration/trip'
          },
          {
            icon: 'fa-circle',
            title: 'Reason Late',
            key: 'reason',
            link: '/configuration/reason-late'
          },
          {
            icon: 'fa-circle',
            title: 'Section Algo',
            key: 'section',
            link: '/configuration/section-algo',
            meta: {role: '2'}
          }
        ]
      }
    ]
    }
  },
  components: {
    Logo
  },
  computed: {
    hasAuthority() {
      const role = LocalStorage.getUser().profile.id
    },
    ...mapState('auth', ['user'])
  },
  methods: {
    activeClass(value) {
      return this.$route.meta.key.includes(value)
        ? 'nav-link active'
        : 'nav-link'
    },

    isObjEmpty(obj) {
      return Object.keys(obj).length === 0
    }
  },

  mounted() {
    $('[data-widget="treeview"]').Treeview('init')
    this.menus.push({
      id: 99,
      childs: [
        {
          slug: 'trip',
          name: 'Trip'
        },
        {
          slug: 'reason-late',
          name: 'Reason Late'
        },
        {
          slug: 'section-algo',
          name: 'Section Algo'
        }
      ],
      slug: 'configuration',
      name: 'Configuration',
      icon: 'fa-cogs'
    })
  }
}
</script>

Answer 1

是的，可以根据角色隐藏菜单，但您需要对代码进行一些更改

在computed -> hasAuthority 代替profile.iid，你可以使用 profile.roleId

hasAuthority() {
      return LocalStorage.getUser().profile.roleId
    },

同样在模板子项中，添加一个if条件来检查是否有 权限 v-if="submenu.meta && submenu.meta.role == hasAuthority"

<ul v-if="menu.submenus" class="nav nav-treeview">
          <li v-for="submenu in menu.submenus" :key="submenu.title" class="nav-item" v-if="submenu.meta && submenu.meta.role == hasAuthority">
            <router-link class="pl-5" :to="submenu.link" :class="activeClass(submenu.key)">

              <p class="pl-2">{{ submenu.title }}</p>
            </router-link>
          </li>
        </ul>