vue + vuex + directives實現權限按鈕的思路

遇到了一個業務場景：

某個按鈕按下去以前須要先判斷它是否登錄，若是沒有登錄須要跳轉到對應的登錄頁面，不然就繼續該按鈕以後的操做。

對於這種問題，很顯然不能每一個按鈕都去判斷，因此我思考了一下結合自定義指令和vuex完成了相應的實現。
主要的代碼實現

const directive = Vue.directive('permission-click', {
  bind: (el, binding, vnode) => {
    el.addEventListener('click', (e) => {
      if (!store.getters.isLogin) {
        store.dispatch('showLogin')
      } else {
        typeof binding.value === 'function' && binding.value()
      }
    })
  }
})複製代碼

這裏封裝了一個自定義指令，添加了一個點擊事件，對於已經登錄的則調用傳進來的函數，不然經過vuex去控制登錄（此處的登錄是經過彈窗實現的）
自定義組件使用的時候也極爲簡單

<div class="" v-permission-click="doSomething">
  ...
</div>複製代碼

vuex裏面的showLogin這個action無非就是對login的顯示隱藏flag的操做。
這裏只是完成了簡單的登錄權限控制，從登錄權限出發，能夠加入更多的權限控制，好比根據role角色判斷，而後能夠全局地控制權限，且實現起來極爲精簡。

Github: github.com/lyh2668
Authby: lyh2668