大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍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去控制登陆(此处的登陆是通过弹窗实现的)
自定义组件使用的时候也极为简单
...
vuex里面的showLogin这个action无非就是对login的显示隐藏flag的操作。
这里只是完成了简单的登陆权限控制,从登陆权限出发,可以加入更多的权限控制,比如根据role角色判断,然后可以全局地控制权限,且实现起来极为精简。
以上是“vue + vuex + directives如何实现权限按钮”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!