详解vue + vuex + directives实现权限按钮的思路
更新时间：2017年10月24日 16:49:10 作者：lyh2668
这篇文章主要介绍了详解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角色判断，然后可以全局地控制权限，且实现起来极为精简。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要分享可编写 Vue v-for 循环的 7 种方式，在Vue中，基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环，接下来一起看看下面文章的详细介绍吧2021-12-12
这篇文章主要为大家详细介绍了Vue如何使用$attrs实现爷爷直接向孙组件传递数据,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下2024-02-02
vue-manage-system升级到vue3的开发总结分析
这篇文章主要为大家介绍了vue-manage-system升级到vue3的开发总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
这篇文章主要介绍了vue项目中企业微信使用js-sdk时config和agentConfig配置,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了vue2.0实现点击其他区域关闭自定义div功能实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了使用vue构建多页面应用的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
vue(element ui)el-table树形表格展示以及数据对齐方式
这篇文章主要介绍了vue(element ui)el-table树形表格展示以及数据对齐方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家详细介绍了Vue跑马灯marquee组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
在平时开发的时候很多情况都会使用到表格和分页功能,下面这篇文章主要给大家介绍了关于如何基于Element-Ui封装公共表格组件的详细图文步骤,需要的朋友可以参考下2022-09-09
vue mounted周期中document.querySelectorAll()获取不到元素的解决
这篇文章主要介绍了vue mounted周期中document.querySelectorAll()获取不到元素的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论