在日常項(xiàng)目中，通常會(huì)需要根據(jù)后臺(tái)接口返回的數(shù)據(jù)，來判斷當(dāng)前用戶的按鈕操作權(quán)限。對于當(dāng)前登錄用戶來說，只有在當(dāng)前按鈕有該權(quán)限時(shí)，才顯示此按鈕；當(dāng)前按鈕沒有這個(gè)權(quán)限時(shí)，就不顯示這個(gè)按鈕。針對這種場景，可以通過 Vue.directive 自定義全局注冊指令來進(jìn)行按鈕級別權(quán)限控制。

概念

除了默認(rèn)設(shè)置的核心指令( v-model 和 v-show ), vue 允許注冊自定義指令，可以對普通 DOM 元素進(jìn)行底層操作。這是一種有效的的補(bǔ)充和擴(kuò)展，不僅可以用于定義任何的 dom 操作，而且是可以復(fù)用的。

注冊一個(gè)自定義指令分為：

1）全局注冊

2）局部注冊

全局自定義指令

Vue.directive：用于全局注冊或獲取全局指令，該指令可以寫一個(gè)自定義的事件。

Vue.directive(el, hooks)

參數(shù)一（el）：自定義指令的名稱

參數(shù)二（hooks）：自定義指令的鉤子函數(shù)對象

局部自定義指令

局部自定義指令是一個(gè)對象，對象的屬性是自定義指令的名稱，對象中屬性的值是自定義指令的鉤子函數(shù)對象。如下：

<template>
  <div></div>
</template>
<script>
export default {
  directives: {
    // 屬性名稱是自定義的指令名稱
    // 屬性值是自定義指令的鉤子函數(shù)對象
    name: {
    }
  }
}
</script>

自定義指令鉤子函數(shù)以及鉤子函數(shù)的參數(shù)

Vue.directive('permission', {
  bind: function (el, binding, vnode) {},
  inserted: function (el, binding, vnode) {},
  update: function (el, binding, vnode, oldVnode) {},
  componentUpdated: function (el, binding, vnode, oldVnode) {},
  unbind: function (el, binding, vnode) {}
})

鉤子函數(shù)

自定義指令有五個(gè)生命周期（也叫鉤子函數(shù)），分別是：bind,inserted,update,componentUpdated,unbind。

• bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。用這個(gè)鉤子函數(shù)可以定義一個(gè)綁定時(shí)執(zhí)行一次的初始化設(shè)置。（ bind 時(shí)父節(jié)點(diǎn)為 null，因?yàn)?bind 是在 dom 樹繪制前調(diào)用）
• inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中，在 dom 樹繪制后調(diào)用）。
• update：被綁定于元素所在的模板 vNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 vNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有?？梢酝ㄟ^比較更新前后的綁定值，來忽略不必要的模板更新。
• componentUpdated：被綁定元素所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。 鉤子函數(shù)參數(shù)說明

自定義指令中傳遞的常用參數(shù)：

• el： 指令所綁定的元素，可以用來直接操作 DOM。
• binding： 一個(gè)對象，包含指令的很多信息。如下：
• name：指令名，不包括 v- 前綴。
• value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
• oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
• expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。
• arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
• modifiers：一個(gè)包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

vnode：Vue編譯生成的虛擬節(jié)點(diǎn)。

oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 之外，其它參數(shù)都應(yīng)該是只讀的。

全局自定義指令項(xiàng)目應(yīng)用

應(yīng)用場景：自定義一個(gè)權(quán)限指令，對需要權(quán)限判斷的 Dom 進(jìn)行顯示隱藏。

后端接口返回的權(quán)限數(shù)據(jù)結(jié)構(gòu)為：

{“search”:“搜索”,“create”:“新增新聞”,“edit”:“編輯”,“enable”:“置頂”,“forbidden”:“取消置頂”,“delete”:“刪除”}

實(shí)現(xiàn)原理：

在 el-button 按鈕上設(shè)置標(biāo)簽數(shù)值，利用 vue 的指令功能獲取按鈕實(shí)例對象和按鈕上綁定的標(biāo)簽數(shù)值，與從接口拿到的按鈕權(quán)限數(shù)據(jù)進(jìn)行匹配，如果匹配成功，證明用戶擁有該按鈕的使用權(quán)限，如果發(fā)現(xiàn)沒有使用權(quán)限，則在指令處理函數(shù)中編寫代碼移除該按鈕，界面上就看不到該按鈕了。

在 src 目錄下新建 directive 目錄，在目錄下新建 permission.js 文件：

const permission = {
	// 全局注冊自定義指令
  install (Vue) {
    // 使用 inserted 函數(shù)，在被綁定元素插入父節(jié)點(diǎn)時(shí)檢測該元素是否有權(quán)限
    Vue.directive('permission', {
      inserted (el, binding, vnode) {
		 /*el: 指令所綁定的元素，可以用來直接操作DOM。
		     binding: 一個(gè)對象，包含指令的很多信息。
		     vnode: Vue編譯生成的虛擬節(jié)點(diǎn)。*/
        const path = window.location.hash.slice(1).split('?')[0]
        const { value } = binding
				// 自定義指令的執(zhí)行函數(shù)，取到登錄緩存的按鈕權(quán)限數(shù)組
        const power = JSON.parse(window.sessionStorage.power)
        const operate = power[path] || {}
        if (!operate[value]) {
					// 判斷是否有權(quán)限，如果沒有權(quán)限，則刪除該節(jié)點(diǎn)
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    })
  }
}
export default permission

在入口文件 src\main.js 里面引入自定義指令：

import permissionfrom './directive/permission'
Vue.use(permission)

在使用的頁面，按鈕中只需引用v-operate指令，賦值判斷即可：

<el-button @click='delHandle' type="primary" v-permission="'delete'">刪除</el-button>

到此這篇關(guān)于vue directive全局自定義指令實(shí)現(xiàn)按鈕級別權(quán)限控制的文章就介紹到這了,更多相關(guān)vue directive按鈕級別權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論