详解vue + vuex + directives实现权限按钮的思路

遇到了一个业务场景：

某个按钮按下去之前需要先判断它是否登陆，如果没有登陆需要跳转到对应的登陆页面，否则就继续该按钮之后的操作。

对于这种问题，很显然不能每个按钮都去判断，所以我思考了一下结合自定义指令和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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
• 基于Vue自定义指令实现按钮级权限控制思路详解
• 详解基于vue-router的动态权限控制实现方案
• 基于vue实现网站前台的权限管理(前后端分离实践)
• 基于Vue实现后台系统权限控制的示例代码
• vue iview实现动态路由和权限验证功能
• 关于Vue的路由权限管理的示例代码
• 详解Vue.js iview实现树形权限表（可扩展表）
• vue-router路由懒加载和权限控制详解
• vue权限问题的完美解决方案