vue 自定义指令权限指令

最新推荐文章于 2025-11-07 16:41:49 发布

原创最新推荐文章于 2025-11-07 16:41:49 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

javascript 同时被 2 个专栏收录

9 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中创建自定义指令`v-permission`，用于实现按钮级别的权限控制。通过在组件上应用指令，根据用户权限动态显示或隐藏内容。在permission.js中定义了指令逻辑，读取用户权限并对比预设的权限列表，如果用户没有相应权限，则隐藏相关元素。该方法适用于不同权限角色的页面元素展示控制。

目前项目中需要做到按钮级别的控制,所以想到了自定义指令来实现,在自定义指令中来控制组件的显示于隐藏。

1.第一步创建自定义指令 js 文件: permission.js

2.在main.js中直接引入 import '@.../../permission' 文件

// permission.js
import Vue from "vue"
// 立即执行函数,这样可以在mian函数直接引入文件不需要写而外的代码
(function(){
  Vue.directive("permission",{
    inserted:function(el,binding){
      // 获取用户权限 [每个人存放用户权限的位置不一致，需要根据自己的业务进行相应的修改]
      let user_permissions = localStorage.getItem('permissions') || [];

      // 获取指令中配置的权限
      let permissions = [];
      var type = Object.prototype.toString.call(binding.value);
      switch(type){
        case '[object Array]':
          permissions = binding.value;
          break;
        case '[object Number]':
          permissions.push(binding.value);
          break;
        default:
          permissions = binding.value.split('|');
          break;
      }
      
      // 配置默认 admin 可以范围所有,这里可以结合你的业务进行调整  
      permissions.push('admin'); 

      // 默认不隐藏
      let flag = false;
      if(user_permissions.length == 0) flag = true;
      else {
        console.log([...new Set(permissions)]);
        console.log(user_permissions);
        if(user_permissions.length == 0)
          flag = true;
        else {
          flag = [...new Set(permissions)].filter(item => user_permissions.indexOf(item) >= 0 ).length > 0;
        }        
      }
       
      // 用户权限不足则隐藏
      if(!flag)
        el.parentNode && el.parentNode.removeChild(el);
    }
  });
})();

// main.js 直接引入不需要做其他操作
import '../.../directives/permission'

// 组件中使用
<div v-permission="'admin|user'">Welcome</div>
或者
<div v-permission="['admin','user']">Welcome</div>