首页 > 其他分享 >vue全局指令按钮权限控制

vue全局指令按钮权限控制

时间:2024-08-27 23:38:01浏览次数:11  
标签:el vue directive permission binding 按钮 权限 permissions

方法一:指令.js

// 注册一个全局自定义指令 `v-has-permission`
Vue.directive('has-permission', {
  bind(el, binding, vnode) {
    // 获取绑定的权限值
    const permission = binding.value;
    // 检查用户是否拥有该权限
    const hasPermission = checkUserPermission(permission); // 假设这是一个检查权限的函数
 
    if (!hasPermission) {
      // 如果用户没有权限,移除DOM元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});
 
// 检查权限的示例函数
function checkUserPermission(permission) {
  // 这里应该是逻辑来判断用户是否拥有权限
  // 假设当前用户拥有权限,返回 true
  return true;
}

使用

<template>
  <button v-has-permission="'edit'">编辑</button>
</template>

 

 

方法二:声名permission.js

 

import store from '@/store'
 
const directive = {}
directive.install = Vue => {
    Vue.directive('has',{
        bind:function(el,binding,vnode){
            // 解构store中存储的permission数据
            let { user = {} } = store.state
            let {permissions = []} = user
            console.log('permissions',permissions);
 
            // 判断permission数组中是否包含binding.value的值
            // console.log(permissions.includes('sys:log:delete'));
            console.log(permissions.includes(binding.value));
 
            // permission数组中包含binding.value的值时,显示按钮;否则隐藏
            permissions.includes(binding.value)?el.style.display='true':el.style.display='none'
        }
    })
}
export default directive

 

在全局文件main.js中引入

 

// 导入按钮权限自定义指令
import directive from '@/directives/permission'
Vue.use(directive)

 

在页面中引用自定义指令‘has’

 

// permission数组中不包含'sys:user:add2',故该按钮隐藏
<el-button v-has="'sys:user:add2'" type="primary">权限2</el-button>
 
// permission数组中包含'sys:user:add',故该按钮显示
<el-button v-has="'sys:user:add'" type="primary">权限1</el-button>

 

标签:el,vue,directive,permission,binding,按钮,权限,permissions
From: https://www.cnblogs.com/fly-s/p/18383740

相关文章

  • vue:父子组件的通信
    上一篇:vue组件化开发在上一篇文章中,我们申明了一点,那就是组件之间是独立的,除非构建了通信。组件间为什么要构建通信?在单一文件中写上整个网站的代码逻辑,这无疑使得维护成本巨大。所以我们选择了组件化开发,把组件间独立起来,这样谁也不干涉谁,是谁的逻辑就在谁的文件中实现......
  • 【PyQt5 应用程序】PyQt基础组件:按钮
    在任何图形用户界面(GUI)应用程序中,按钮是最基本也是最频繁使用的组件之一。它们是用户与应用程序交互的主要方式之一。在PyQt中,按钮可以通过QPushButton类创建,它提供了丰富的功能,包括显示文本、图像,以及响应点击事件。本节将引导你了解如何在PyQt应用中创建和使用按钮,并通过......
  • 基于ssm+vue党员管理系统设计与实现【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息化技术的飞速发展,传统的手工党员管理模式已难以满足当前复杂多变的党务工作需求。党员作为党组织的基石,其信息的准确性、管理的效率性直接关......
  • 基于ssm+vue法律知识咨询普及系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在当今社会,随着法治建设的不断推进和公民法律意识的日益增强,法律知识咨询与普及成为了社会发展的重要需求。然而,面对纷繁复杂的法律条文与不断更新的......
  • 基于ssm+vue的校园心理咨询室系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着社会的快速发展与竞争的日益激烈,大学生面临着学业压力、人际关系、职业规划等多重挑战,心理健康问题日益凸显。传统的心理咨询方式受限于时间、地......
  • 基于ssm+vue的宠物领养系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着现代社会生活节奏的加快与人际关系的日益复杂,宠物逐渐成为许多人生活中不可或缺的伙伴,它们不仅能够提供情感慰藉,还能在孤独时给予陪伴。然而,宠物......
  • 基于ssm+vue房屋租赁系统的设计与实现【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着城市化进程的加速和人口流动性的增强,房屋租赁市场日益繁荣,成为现代都市生活中不可或缺的一部分。然而,传统的房屋租赁方式往往存在信息不对称、流......
  • 基于ssm+vue废品回收管理系统设计与实现【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着社会的快速发展和人们生活水平的不断提升,垃圾产生量急剧增加,垃圾分类与回收已成为环境保护和可持续发展的关键议题。然而,当前废品回收领域仍面临......
  • 基于ssm+vue宠物店管理系统【开题+程序+论文】
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着宠物经济的蓬勃发展,宠物已成为许多家庭不可或缺的一员,其地位逐渐提升,宠物市场的需求也随之日益增长。宠物店作为宠物产业链中的重要一环,不仅提供......
  • 基于Node.js+vue社区医疗服务系统(程序+论文+开题报告)-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着社会老龄化的加剧和居民健康意识的提升,社区医疗服务作为连接居民与医疗资源的重要桥梁,其重要性与日俱增。然而,当前许多社区医疗服务存在资源分配不均、......