详解vue + vuex + directives实现权限按钮的思路


Posted in Javascript onOctober 24, 2017

遇到了一个业务场景:

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

对于这种问题,很显然不能每个按钮都去判断,所以我思考了一下结合自定义指令和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角色判断,然后可以全局地控制权限,且实现起来极为精简。

Github: github.com/lyh2668

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
JavaScript基本编码模式小结
May 23 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
vue跨域解决方法
Oct 15 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
React Native实现地址挑选器功能
Oct 24 #Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 #Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 #Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 #Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 #Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 #Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 #Javascript
You might like
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
Python标准库与第三方库详解
2014/07/22 Python
Python使用chardet判断字符编码
2015/05/09 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python eventlet绿化和patch原理
2020/11/21 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
项目施工员岗位职责
2014/03/09 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
离婚协议书范文2015
2015/01/26 职场文书
避暑山庄导游词
2015/02/04 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python