遇到了一个业务场景：

某个按钮按下去之前需要先判断它是否登陆，如果没有登陆需要跳转到对应的登陆页面，否则就继续该按钮之后的操作。

对于这种问题，很显然不能每个按钮都去判断，所以我思考了一下结合自定义指令和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去控制登陆（此处的登陆是通过弹窗实现的）

    
       ...
    
复制代码

vuex里面的showLogin这个action无非就是对login的显示隐藏flag的操作。

Github:

Authby: lyh2668