美文网首页
15.记录Vue项目实现Vue.directive权限指令控制节

15.记录Vue项目实现Vue.directive权限指令控制节

作者: 饿了么配送员 | 来源:发表于2020-12-27 08:39 被阅读0次

首先创建一个 btnPermissions.js 文件夹(路由里面存放了该页面拥有的按钮权限)

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
 bind: function (el, binding, vnode) {
  // 获取页面路由按钮权限
  let btnPermissions = vnode.context.$route.meta.permissionValues;
  // 进入循环判断是否显示该节点
  if (!Vue.prototype.$_has(btnPermissions,binding.value)) {
//    el.parentNode.removeChild(el);
       el.style.display = "none";
  }
 }
});
// 权限检查方法 value:按钮的值 btnPermissions: 路由含有的按钮权限 
Vue.prototype.$_has = function (btnPermissions,value) {
 let isExist = false;
 // 判断当前用户该页面是否含有权限按钮
 if (btnPermissions == undefined || btnPermissions == null) {
  return false;
 }
 // 判断该用户该页面的权限按钮是否显示
 if (btnPermissions.indexOf(value) > -1) {
  isExist = true;
 }
 return isExist;
};
export {has}
路由配置

在main.js 全局调用

import has from './plugins/btnPermissions' // 权限按钮字段判断

在页面使用

<Button icon="md-add" type="primary" style="margin-left: 10px" v-has="user.add" @click="add">添加</Button>

export default {
  data() {
    return {
      user:{
        add: "user.add"
      }, // 权限按钮
  }
}

相关文章

网友评论

      本文标题:15.记录Vue项目实现Vue.directive权限指令控制节

      本文链接:https://www.haomeiwen.com/subject/dohgnktx.html