Vue | 自定义指令 + Vuex 实现鉴权

需求：要求实现一个自定义指令，按钮使用了该指令后，点击时检查是否登录/是否有权限，从而决定下一步操作。

自定义组件可以全局定义或组件内定义

局部定义

<el-button v-permission-click="goKeepAlive">keep-alive</el-button>

directives:{
    'permission-click':{
        bind:(el,binding,vNode)=>{
            el.addEventListener('click',function(){
                if(this.$store.getters.isLogin){
                     binding.value(); // 用户绑定的函数,这里是goKeepAlive
                }else{
                    alert('请登录');
                    router.push('/login')
                }
            })
        }
    }
},

全局定义

在main.js中定义，注意要在new Vue(…)之前

Vue.directive('permission-click', {
  // 当被绑定的元素插入到 DOM 中时……
  bind: function (el,binding) {
      console.log('全局定义')
      el.addEventListener('click',function(){
        if(this.$store.getters.isLogin){
            binding.value(); // test()
        }else{
            alert('请登录');
            router.push('/login')
        }
    })
  }
})

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode，更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数

Vuex部分

提供登录状态和修改该状态的actions。

const store = new Vuex.Store({
    state:{
        isLogin:false
    },
    getters:{
        isLogin:function(state){
            return state.isLogin    
        }
    },
    mutations:{
        setIsLoginFn:function(state,status){
            state.isLogin = status;
        }
    },

    actions:{
        setIsLogin:function(context,status){
            context.commit('setIsLoginFn',status)
        }
    }
})

export default store

参考：https://segmentfault.com/a/1190000011689399