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

一橫發表於2017-10-24
Vue

遇到了一個業務場景：

某個按鈕按下去之前需要先判斷它是否登陸，如果沒有登陸需要跳轉到對應的登陸頁面，否則就繼續該按鈕之後的操作。

對於這種問題，很顯然不能每個按鈕都去判斷，所以我思考了一下結合自定義指令和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

相關文章