Vue按钮权限

简介: Vue按钮权限

按钮权限:通过判断当前用户是否拥有该权限控制当前组件的显示与删除

第一步、请求后端数据得到当前用户的所有的按钮权限,类型为数组

第二步、在main.js中注册自定义指令 v-permission

这里通过store.state.ruleNames可以获取到后端传过来的数据 ruleNames,表示当前用户的所有按钮权限。

通过bingding.value可以获取到当前指令绑定的数组, 在hasPermission方法中判断当前值在ruleNames中是否存在,如果存在,则显示该组件,不存在,则删除该组件

打印出来的结果

第三步、通过在组件中增加指令, v-permission就可以实现该组件在当前用户状态下的显示与隐藏

目录
相关文章
|
4天前
|
JavaScript 前端开发 安全
Vue响应式设计
【5月更文挑战第30天】Vue响应式设计
24 1
|
3天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
3天前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
3天前
|
JavaScript
|
4天前
|
编解码 JavaScript API
Vue在移动端的表现如何?
【5月更文挑战第30天】Vue在移动端的表现如何?
11 2
|
4天前
|
JavaScript 前端开发 API
Vue与其他框架的对比优势
【5月更文挑战第30天】Vue与其他框架的对比优势
11 1
|
5天前
|
JavaScript
Vue常用知识点总结
Vue常用知识点总结
12 0
|
5天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
25 7
|
5天前
|
JSON JavaScript 前端开发
|
6天前
|
JavaScript 前端开发 Java
开发语言漫谈-Vue
Vue严格说来不是一门语言