vue 自定义指令 权限指令(1)

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

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>