详解vue + vuex + directives实现权限按钮的思路
2017-10-24 16:49
806 查看
遇到了一个业务场景:
某个按钮按下去之前需要先判断它是否登陆,如果没有登陆需要跳转到对应的登陆页面,否则就继续该按钮之后的操作。
对于这种问题,很显然不能每个按钮都去判断,所以我思考了一下结合自定义指令和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角色判断,然后可以全局地控制权限,且实现起来极为精简。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 基于Vue自定义指令实现按钮级权限控制思路详解
- vue实现2048小游戏功能思路详解
- 【业务】Vue项目里利用md5的来实现一个权限系统的思路记录
- 针对Vue的后台权限功能实现思路(持续更新) 3ff8
- Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解
- 简化版的vue-router实现思路详解
- 详解Vue.js iview实现树形权限表(可扩展表)
- 详解基于vue-router的动态权限控制实现方案
- 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
- Vue实现textarea固定输入行数与添加下划线样式的思路详解
- vue中element 上传功能的实现思路
- 关于级联(树形权限)的基本实现思路
- SSO单点登录基本概念实现思路以及小的实例详解
- PHP实现执行定时任务的几种思路详解
- 权限管理 (一) 设计思路分析和实现授权、认证
- 详解vue之better-scroll实现轮播图和页面滚动
- .Net中关于stirng转System.Type的一种实现思路详解
- Extjs4 权限系统(包括页面按钮权限) 设计思路+数据库表设计
- 跳一跳辅助实现思路详解
- 浅谈Vue路由快照实现思路及其问题