前端vue：權限控制之權限指令

天天學習一個vue知識點呀

前言

涉及到知識點：

• 自定義指令v-xxx
• 插件式註冊自定義指令 vue.use()
• 回顧自定義指令的鉤子函數

自定義指令鉤子函數

一個指令定義對象能夠提供以下幾個鉤子函數 (均爲可選)：

• bind:只調用一次，指令第一次綁定到元素時候調用。在這個鉤子函數中能夠進行一次性的初始化設置；
• inserted:該鉤子函數在被綁定元素插入父節點時候調用；
• update:所在組件的VNode更新時候調用，（可能發生在其子VNode更新以前，指令的值可能發生了改變，也可能沒有改變）
• componentUpdated:指令所在組件的VNode及其子VNode所有更新之後調用
• unbind:只調用一次，指令與元素解綁時調用

自定義指令鉤子函數參數

（el,binding,vnode,oldVnode）

• el：指令所綁定的元素，能夠用來直接操做 DOM 。
• binding：一個對象，包含如下屬性：
  • name：指令名，不包括 v- 前綴。
  • value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
  • expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
  • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
  • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
• oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用

directives/auth.js

import { check } from "../utils/auth";
// 開發插件的方式；定義指令；第一個參數是Vue 構造器，第二個參數是可選的選項對象
function install(Vue, options = {}) {

  Vue.directive(options.name || "auth", {
    // 指令定義對象的鉤子函數inserted
    inserted(el, binding) {
      if (!check(binding.value)) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  });
}

export default { install };
複製代碼

utils/auth.js

const currentAuth = ["admin"];
export { currentAuth };

export function getCurrentAuthority() {
    return currentAuth;
}

export function check(authority) {
    const current = getCurrentAuthority();
    return current.some(item => authority.includes(item));
}

export function isLogin() {
    const current = getCurrentAuthority();
    return current && current[0] !== "guest";
}
複製代碼

註冊自定義指令

//main.js
//經過全局方法 Vue.use() 使用插件。它須要在你調用 new Vue() 啓動應用以前完成：
import Auth from "./directives/auth";
Vue.use(Auth);
複製代碼

權限指令的使用

<a-icon
            v-auth="['admin']"
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="collapsed = !collapsed"
          ></a-icon>
複製代碼

參考官網