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

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

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

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

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

第一種-自定義權限指令

我的寫法是新建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)
	}
}

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

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

main.js

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

用法：

<el-button v-permission="['add']">權限按鈕</el-button>

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

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

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

這時我們想到，如果要定義一個函數(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é)點權限要分兩種情況？同樣都是移除節(jié)點，為什么還要用v-if？

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

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

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

最新評論