关于javascript:vue权限控制组件

在 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')
  }
}

编码解决问题