详解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国旗变换效果代码
Aug 13 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
nuxt引入组件和公共样式的操作
Nov 05 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[02:27]刀塔重生降临
2015/10/14 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
利用Python查看目录中的文件示例详解
2017/08/28 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
C语言编程题
2015/03/09 面试题
医学院学生的自我评价分享
2013/11/19 职场文书
后勤部长岗位职责
2013/12/14 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
精神病医院见习报告
2014/11/03 职场文书
涨价通知怎么写
2015/04/23 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
介绍一下28个JS常用数组方法
2022/05/06 Javascript
nginx七层负载均衡配置详解
2022/07/15 Servers