详解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 设计模式之组合模式解析
Apr 09 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
JavaScript交换变量常用4种方法解析
Sep 02 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
linux实现php定时执行cron任务详解
2013/12/24 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
给物业的表扬信
2014/01/21 职场文书
个人担保书格式范文
2014/05/12 职场文书
校园文明标语
2014/06/13 职场文书
办理信用卡工作证明
2014/09/30 职场文书
警示教育片观后感
2015/06/17 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript