详解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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
微信小程序实现商城倒计时
Nov 01 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 版本]
2007/03/20 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP中ADODB类详解
2008/03/25 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Python对数据库操作
2016/03/28 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
优秀演讲稿范文
2013/12/29 职场文书
小区消防演习方案
2014/02/21 职场文书
大班幼儿评语大全
2014/04/30 职场文书
2014年宣传工作总结
2014/11/18 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
Python基础之数据结构详解
2021/04/28 Python