详解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--vuex详解，包括了vue--vuex详解的使用技巧和注意事项，需要的朋友参考一下 Vuex 什么是Vuex？ 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件之间通信的一个插件 为什么要用Vuex？ 我们知道组件之间是独立的
-
本文向大家介绍Vue 幸运大转盘实现思路详解，包括了Vue 幸运大转盘实现思路详解的使用技巧和注意事项，需要的朋友参考一下 转盘抽奖主要有两种，指针转动和转盘转动，个人觉得转盘转动比较好看点，指针转动看着头晕，转盘转动时指针是在转盘的中间位置，这里要用到css的transform属性和transition属性，这两个因为不常用最好是上网查查，用法和功能。 在html部分 总结 以上所述是小编给
-
本文向大家介绍Django权限机制实现代码详解，包括了Django权限机制实现代码详解的使用技巧和注意事项，需要的朋友参考一下 本文研究的主要是Django权限机制的相关内容，具体如下。 1. Django权限机制概述 权限机制能够约束用户行为，控制页面的显示内容，也能使API更加安全和灵活；用好权限机制，能让系统更加强大和健壮。因此，基于Django的开发，理清Django权限机制是非常必要的。
-
本文向大家介绍vue-router 控制路由权限的实现，包括了vue-router 控制路由权限的实现的使用技巧和注意事项，需要的朋友参考一下 注意：vue-router是无法完全控制前端路由权限。 1、实现思路 使用vue-router实例函数addRoutes动态添加路由规则，不多废话直接上思维导图: 2、实现步骤 2.1、路由匹配判断 通过vue-router前置守卫beforeEach中参
-
假设管理员用户admin有一个路由页面/admin是普通用户不能访问的，现在普通用户user通过某种手段使用addRoutes将这个/admin页面添加到了自己的路由列表中，这样也能访问/admin页面了，请问这种情况前端和后端分别应该怎么处理，感觉前端阻止不了这个操作，后端如何限制呢
-
vue实现动态按钮借助iview的Button，由于这些按钮是配置出来的，目前没有代码，还不清楚怎么写，所以麻烦大佬们了 如图 期望能在各个vue组件使用的，然后通过不同的点击来触发事件，希望大佬们，给个思路