在vue中(vue2)按钮级别的权限管制较多人的解决方案为应用指令管制或v-if，但这两者都有肯定的弊病：

• 应用指令管制的弊病： 当按钮没有权限时只能让按钮暗藏掉(即设置display: none)，不能让按钮隐没，如果遇到懂行的人，只需将按钮的display值改为block则又可让按钮复原可用
• 应用v-if管制的弊病： ①须要在每个应用按钮的中央定义判断有无权限的函数；②当按钮中的v-if条件过多时会减少了解代码的难度，并且还须要调用判断有无权限的函数并传递权限编码。

而应用权限管制组件就能够解决以上三个问题！
它的弊病就是：须要多包一层组件

编码解决问题

PermissionEl.vue组件代码：

<script>export default {  name: 'PermissionEl',  props: {    permissionCode: { // 权限编码，多个编码按逗号隔开      type: String,      default: ''    }  },  computed: {    isPermissionPass(){      let flag = false;      let permissionCodeArr = (this.permissionCode || '').split(',');      if(permissionCodeArr.length == 0){        return false;      }      // 获取权限列表      let permissionList = (this.$store.getters.permissions || {}).list || [];      let codesMap = permissionList.reduce((res, item) => {        res[item.code] = item.code;        return res;      }, {});      for(let i = 0, len = permissionCodeArr.length; i < len; i++){        // 只有蕴含了一个权限code则示意通过了        if(permissionCodeArr[i] in codesMap){          flag = true;          break;        }      }      return flag;    }  },  render() {    let isPermissionPass = this.isPermissionPass;    // 默认渲染插槽里的内容（只取插槽里的第一个组件，    // 如果要反对多个组件的话须要包裹一层dom元素）    let renderContent = (this.$slots.default || [])[0];    // 如果插槽里没有内容或者权限未通过则渲染一个正文节点（vue的v-if指令也是这样的做法）    if(!isPermissionPass || !renderContent){      renderContent = document.createComment('-');    }    return renderContent;  }};</script>

应用：

<template>  <div class="home">    <h1>欢送来到首页！</h1>    <permission-el permission-code="home_btn">      <el-button type="primary">一个权限管制的组件</el-button>    </permission-el>  </div></template>export default {  name: 'Home',  components: {    PermissionEl: () => import('./PermissionEl.vue')  }}