在日常的開發(fā)過程中，我們除了使用Vue已有的指令之外，還需自定義指令，需要對DOM節(jié)點進一步操作。

在后臺系統(tǒng)中，最常用的就是權(quán)限指令。

權(quán)限控制的原理就是在系統(tǒng)當(dāng)前界面初始化時，判斷某些DOM節(jié)點有沒有權(quán)限，沒有則移除此DOM。

在Vue中使用指令權(quán)限時，通常有兩種控制節(jié)點的方法。第一個是對普通節(jié)點的指令控制（普通節(jié)點即是指 html 中的標簽節(jié)點。），第二個則是對elementUI組件的控制。

為什么分兩種呢？是因為在實際開發(fā)過程中，我發(fā)現(xiàn)自定義指令有時候無法移除element中的組件，例如：在使用el-tab時，下面包含了多個tab頁，當(dāng)某個tab頁無權(quán)限訪問時 想要對其進行移除，這時候自定義的指令只能移除此tab頁內(nèi)的內(nèi)容，并不能夠?qū)⒋藅ab頁一起移除。所以這時候會使用v-if進行控制。

第一種-自定義權(quán)限指令

我的寫法是新建permission文件夾，此文件夾下面包含index.js、permission.js，接下來直接上代碼：

index.js

import permission from './permission'
import Vue from 'vue'
Vue.directive('permission', permission)

permission.js

import store from '@/store'
async function checkPermission(el, binding) {
	const { value } = binding
	const roles = await store.getters && store.getters.permission
	if( value && value instanceof Array) {
		if( value.length > 0) {
			const permissionRoles = value
			const hasPermission = roles.some(role => {
				return permissionRoles.includes(role)
			})
			if(!hasPermission) {
				el.parentNode && el.parentNode.removeChild(el)
			}
		}
	}else {
		throw new Error('需要以數(shù)組的形式傳角色')
	}
}
export default {
	inserted(el, binding) {
		checkPermission(el, binding)
	},
	update(el, binding) {
		checkPermission(el, binding)
	}
}

在這里面需要解釋的是權(quán)限列表的獲取，我的權(quán)限列表是存儲在store的permission中，所以在進入的時候直接獲取permission。

最重要的一步，需要將index.js引入到main.js中去執(zhí)行。

main.js

import './permission' // 此引入需要在創(chuàng)建Vue實例之前引用

用法：

<el-button v-permission="['add']">權(quán)限按鈕</el-button>

第二種：v-if自定義控制

如果使用第一種方式的話，其是移除當(dāng)前DOM下的子節(jié)點，是沒辦法移除當(dāng)前節(jié)點的。所以這時候就需要通過自定義的v-if來控制。

思路：v-if中執(zhí)行一個函數(shù)，函數(shù)傳入一個權(quán)限值。在函數(shù)中判斷權(quán)限值是否屬于權(quán)限菜單內(nèi)，返回布爾類型值。

這時我們想到，如果要定義一個函數(shù)在任何組件中都可以使用，那么要么是工具類函數(shù)，要么是mixins。如果是封裝工具類函數(shù)，則沒辦法直接在模板中使用，而是需要在methods中使用，所以我們直接選擇mixins，混入方法。

我們創(chuàng)建控制節(jié)點的文件controlNode.js

import store from "@/store"
export default {
	methods: {
		controlNode(node) {
			const permission = store.getters.permission
			let result = permission.includes(node)
			return result
		}
	}
}

用法：

在組件中使用mixins

<template>
<div>
	<el-tabs>
		<el-tab-pane v-if="controlNode('add')"></el-tab-pane>
		<el-tab-pane></el-tab-pane>
	</el-tabs>
</div>
</template>
<script>
import controlNode from "@/permission/controlNode"
export default {
	name: "component",
	mixins: [controlNode]
}
</script>

最后說明

為什么控制節(jié)點權(quán)限要分兩種情況？同樣都是移除節(jié)點，為什么還要用v-if？

如果你仔細觀察代碼，在第一種方式中，我們移除的是 child，是將當(dāng)前節(jié)點的子元素進行移除，此時當(dāng)前節(jié)點依然存在。所以就出現(xiàn)了所分的兩種情況。

那有沒有辦法用自定義的指令就可以完成移除呢？那當(dāng)然是有的，在第一種方式中，只需要將removeChild改為remove即可。即將移除子元素改為移除當(dāng)前節(jié)點本身。

到此這篇關(guān)于Vue權(quán)限指令控制權(quán)限詳解的文章就介紹到這了,更多相關(guān)Vue權(quán)限指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論