vue全局指令按钮权限控制

方法一：指令.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>