Vue權(quán)限指令控制權(quán)限詳解

更新時(shí)間：2022年09月26日 09:28:48 作者：聶大哥

因?yàn)轫?xiàng)目中需要根據(jù)后端返回的權(quán)限進(jìn)行功能的顯示隱藏，所以就加了個(gè)權(quán)限指令。不用寫(xiě)if else進(jìn)行判斷，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

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

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

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

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

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)限列表是存儲(chǔ)在store的permission中，所以在進(jìn)入的時(shí)候直接獲取permission。

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

main.js

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

用法：

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

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

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

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

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

我們創(chuàng)建控制節(jié)點(diǎn)的文件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>