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>