admin 按钮级 权限控制

后端返回的数据

在这里插入图片描述

前端实现通过自定义指令实现按钮权限的控制

在main.js中定义自定义指令

// 自定义指令
Vue.directive('permission', {
  bind: function (el, binding) {

    console.log(el, binding, '1121')
    if (!Vue.prototype.$_permission(binding.value)) {
      if (!el.parentNode) {
        el.style.display = 'none'
      } else {
        el.parentNode.removeChild(el)
      }
    }

  }
});

// 挂载在原型链中 方便全局使用
// 是否匹配后端返回的按钮权限列表
Vue.prototype.$_permission = function (value) {
  // debugger

  let isExist = false;
  let buttonpermsStr = localStorage.getItem("buttenpremissions");
  if (buttonpermsStr == undefined || buttonpermsStr == null) {
    return false;
  }
  let buttonperms = JSON.parse(buttonpermsStr);
  for (let i = 0; i < buttonperms.length; i++) {
    if (buttonperms[i].indexOf(value) > -1) {
      isExist = true;
      break;
    }
  }
  return isExist;
};

在页面中使用
在需要的按钮标签中加入 v-permission="'按钮权限'"实现

我这里的按钮权限为system:merchant:edit 我输入的是system:merchant:edit1'

效果图

在这里插入图片描述

      <button
        class="btnCss btn1"
        @click="$router.push('/setting/addMchid')"
        v-permission="'system:merchant:edit1'"
      >添加</button>

在这里插入图片描述

组件中使用 通过使用$_permission函数结合v-if 实现元素的权限控制

      <el-table-column prop="queue" label="状态" v-if="$_permission('system:type:enable')" >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            @change="changeSelect(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
      </el-table-column>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值