vue 按钮 权限控制
vue 按钮 权限控制
前言
在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限。必须当有删除权限时,就显示删除按钮。没有这个权限时,就不显示或者删除这个按钮。通过查找资料,通过vuex来实现这个功能。
步骤
1.定义buttom权限
在state
中创建buttomPermission
,用于保存后台接口返回的权限数据。
setPermission
用于接受数据,将页面权限管理传入到buttomPermission
对象中。
使用vuex
Vue.use(Vuex)创建vue实例
const store = new Vuex.Store({state: {buttomPermission: {}},mutations: {setPermission(state, permission) {state.buttomPermission = permission}}
})
export default store
2.定义store
import store from './store/index.js'new Vue({store,el: '#app',render: h => h(App)
})
3.创建permission
指令
新建directives
文件夹,创建permission.js
文件。
这里使用inserted
函数,在被绑定元素插入父节点时检测该元素是否有权限。
inserted( el, bindings, vnode ) { }
4.使用permission
指令
在按钮页面引入和定义 permission指令,并且在buttom中写入指令,绑定指令中相对于的值。
<button v-permission="'add'">添加</button>
import permission from './directives/permission'
directives: {permission,},
5.删除无权限数据
在permission
指令,通过bindings
获取该按钮绑定的value值,然后在buttomPermission
对象中找到,然后判断是否有权限,如果没有权限,则删除该节点。
inserted(el, bindings, vnode) {let btnPermissionValue = bindings.value;let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];!boolean && el.parentNode.removeChild(el);}
6.传入状态管理数据
将状态管理数据,通过setPermission
方法传入到权限管理中
let permissions = {}
this.$store.commit("setPermission", permissions);
概况
总的来说,就是通过vuex
定义一个buttomPermission
权限状态对象,然后再创建一个permissions
指令,通过对每个buttom
按钮使用permissions
指令,并且绑定该按钮特定意义的值。然后在permission.js
文件中,获取当前value
值,从buttomPermission
中得到当前按钮是否有权限,没有则直接删除掉当前按钮节点。
vue 按钮 权限控制相关推荐
- Vue 前端页面按钮权限控制
前言 按钮权限控制的功能其实在前面的一篇的页面权限管理也包含有这个功能,但是没有凸显出来,所以现在单独写一篇文章用来记录一下 一.什么是按钮权限控制? 刚刚做完了一个后台管理系统,有用到按钮权限控制, ...
- Vue中权限控制完全实现
一.菜单权限的实现: 在登录请求中会得到权限数据,当然这个需要后端返回数据的支持,前端根据权限数据展示对应的菜单,点击菜单才能查看相应的界面. 登录之后获取到的数据: [{path: "/m ...
- 《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
- 自定义jsp标签实现按钮权限控制
一.了解jsp自定义标签 自定义标签是用户定义的JSP语言元素.当JSP页面包含一个自定义标签时将被转化为servlet,标签转化为对tag handler的对象的操作,即当servlet执行时Web ...
- java按钮权限控制_aop (权限控制之功能权限)
在实际web开发过程中通常会存在功能权限的控制,不如这个角色只允许拥有查询权限,这个角色拥有CRUD权限,当然按钮权限显示控制上可以用button.tld来控制,本文就不说明. 具体控制流程就是通过登 ...
- 菜单权限及按钮权限控制
实现思路: 1.通过利用动态路由.静态路由实现动态路由 2.通过router-beforeEach钩子监听是否有权限 3.利用Vue.directive监听页面挂在完成控制按钮权限 实现代码: rou ...
- java按钮权限控制_详解Spring Security 中的四种权限控制方式
Spring Security 中对于权限控制默认已经提供了很多了,但是,一个优秀的框架必须具备良好的扩展性,恰好,Spring Security 的扩展性就非常棒,我们既可以使用 Spring Se ...
- Vue 页面权限控制(一)
目录 前言 一.路由元信息和beforeEach() 1.路由元信息 2.beforeEach() 二.权限管理 1.路由比较少的情况 2.多路由-遍历to.matched 总结 前言 1.如果您有V ...
- 通过servlet.jsp.tagext.TagSupport的自定义标签实现按钮权限控制
2019独角兽企业重金招聘Python工程师标准>>> 第一步:定义标签格式 如下图先在安全目录下建立一个tld文件 内容代码如下 <?xml version="1. ...
最新文章
- Android通过意图使用内置的音频播放器
- HTTP(S)协议详解
- Java7并发编程指南——第八章:测试并发应用程序
- vba 根据分辨率 调整窗口显示比例_2020 如何选择适合自己的显示器?小白选购电脑显示器必看,附各类型显示器高性价比选购指南分析...
- svn+http+ad域
- 如何在sh的字符串中包含换行符?
- Android中UI线程与后台线程交互设计的5种方法
- 从西刺网获取可用的代理IP
- VBA代码片之计算加权平均分
- 七月算法-P2 概率论与数理统计(1)
- 西安大唐提车游记——感受古都容颜
- 微信小程登录功能和获取手机号
- C#中使用设置(Settings.settings) Properties.Settings.Default .
- 【汤姆猫的实现 Objective-C语言】
- 谷歌地图高清卫星地图、电子地图和地形图有什么区别?
- 随心玩玩(四)docker从入门到入土
- 微信小程序图片的加载
- 【智能QbD风险评估工具】上海道宁为您带来智能QbD风险评估工具——LeanQbD
- 阿里巴巴矢量图标库批量下载图标
- 什么是.vue文件,它的作用是什么