vue 通过v-has设定权限

2021-01-15  本文已影响0人  love_peaches

可以在main.js中定义,代码如下

/** 权限指令,对按钮权限的控制 **/
const has = Vue.directive("has", {
  inserted: function(el, binding) {
    if (!Vue.prototype.$_has(binding.value)) {
      el.parentNode.removeChild(el);
    }
  },
});
// 权限检查方法(且把该方法添加到vue原型中)
Vue.prototype.$_has = function(value) {
  let isExist = false;
  // 从浏览器缓存中获取权限数组(该数组在登入成功后拉取用户的权限信息时保存在浏览器的缓存中)
  var buttonpermsStr = JSON.parse(sessionStorage.getItem("btnPemission"));
  if (buttonpermsStr == undefined || buttonpermsStr == null) {
    return false;
  }
  if (buttonpermsStr.indexOf(value) >= 0) {
    // 若在按钮中定义的权限字段能在后端返回的权限数组中能找到,则该按钮可显示
    isExist = true;
  }
  return isExist;
};
export { has };

使用的时候就根据后端返回的接口数据,在对应的按钮上面写


image.png
上一篇下一篇

猜你喜欢

热点阅读