遇到了一个业务场景：
某个按钮按下去之前需要先判断它是否登陆，如果没有登陆需要跳转到对应的登陆页面，否则就继续该按钮之后的操作。
对于这种问题，很显然不能每个按钮都去判断，所以我思考了一下结合自定义指令和vuex完成了相应的实现。
主要的代码实现
{
el.addEventListener('click',(e) => {
if (!store.getters.isLogin) {
store.dispatch('showLogin')
} else {
typeof binding.value === 'function' && binding.value()
}
})
}
})
这里封装了一个自定义指令，添加了一个点击事件，对于已经登陆的则调用传进来的函数，否则通过vuex去控制登陆（此处的登陆是通过弹窗实现的）
自定义组件使用的时候也极为简单
rush:xhtml;">
vuex里面的showLogin这个action无非就是对login的显示隐藏flag的操作。
这里只是完成了简单的登陆权限控制，从登陆权限出发，可以加入更多的权限控制，比如根据role角色判断，然后可以全局地控制权限，且实现起来极为精简。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/vue/35613.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
