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