详解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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
详解TypeScript中的类型保护
Apr 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生成便于打印的网页
2006/10/09 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php实现Session存储到Redis
2015/11/11 PHP
浅说js变量
2011/05/25 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
vue props 单项数据流实例分享
2020/02/16 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
Python实现多线程抓取妹子图
2015/08/08 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python 判断网络连通的实现方法
2018/04/22 Python
numpy返回array中元素的index方法
2018/06/27 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
会议开场欢迎词
2014/01/15 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
小学生作文评语大全
2014/04/21 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
同学聚会通知书
2015/04/20 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python