![](/img/trans.png)
[英]Display sidebar menu elements based on user's role, with "yaminncco/vue-sidebar-menu" package
[英]Sidebar Based on Role Local Storage
我找到了一個基於登錄角色隱藏一些側邊欄菜單的解決方案,我有 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>
是的,可以根據角色隱藏菜單,但是您需要對代碼進行一些更改
在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.