自定义指令（权限指令）

应用场景

项目中需要做到按钮级别的权限控制,使用自定义指令来实现,在自定义指令判断用户权限中来控制组件的显示于隐藏。

定义自定义has指令

//自定义权限指令
Vue.directive('has', {
	bind: function (el, binding) {
		if (!Vue.prototype.$_has(binding.value)) {
			if (el.parentNode) {
				el.parentNode.removeChild(el)
			} else {
				el.style.display = 'none'
			}
		}
	},
})

//按钮权限检查方法
Vue.prototype.$_has = function (value) {
	let isExist = false
	let userPermissions = sessionStorage.getItem('userPermissions')
	if (userPermissions == undefined || userPermissions == null) {
		return false
	}
	let userPermissionsList = JSON.parse(userPermissions)
	for (let i = 0; i < userPermissionsList .length; i++) {
		if (userPermissionsList [i].permission === value) {
			isExist = true
			break
		}
	}
	return isExist
}

使用方法

<b-button
    v-has="'deviceList::Import'"
    @click="modalShow = !modalShow"
    variant="info">
    Import
</b-button>