二次封装el-button实现的vue权限按钮组件

由于楼主公司之前做了一个带权限管理的系统，所以今天给大家分享一下我是如何处理前端按钮级别权限的
整体思路就是如何通过v-if控制前端按钮的显示与隐藏
项目是基于vue和element开发的，所以按钮我是拿el-button二次封装了一下，项目中用到了vuex 所以我们把从后台拿到的数组格式的按钮集合的数组存在了vuex中 集合中存入的当前按钮的标识
我采用的命名规则是 按钮所在文件夹名字:按钮所在文件名字:按钮语义化的名字
如: AuthorityManagement:PermissionsList:add 添加（add）
下面开始进入代码了
首先建一个书写权限方法的文件夹 permission/index.js
代码内容

import store from '@/store'
/**
 * 判断用户是否拥有操作权限
 * 根据传入的权限标识，查看是否存在用户权限标识集合
 * @param perms
 */
export function hasPermission (perms) {
    let hasPermission = false
    let permissions = store.state.user.perms
    for(let i=0, len=permissions.length; i<len; i++) {
        if(permissions[i] === perms) {
            hasPermission = true;
            break
        }
    }
    return hasPermission
}

函数通过当前按钮设置的标识来对比后台传回来的权限集合从何返回一个布尔值

封装的组件代码如下

<template>
  <el-button :size="size" :type="type"
    :loading="loading"  :disabled="disabled" v-if="hasPerms(perms)"  @click="handleClick">
    {{label}}
  </el-button>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'KtButton',
  props: {
    label: {  // 按钮显示文本
      type: String,
      default: 'Button'
    },
    size: {  // 按钮尺寸
      type: String,
      default: 'mini'
    },
    type: {  // 按钮类型
      type: String,
      default: null
    },
    loading: {  // 按钮加载标识
      type: Boolean,
      default: false
    },
    disabled: {  // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function () {
      // 按钮操作处理函数
      this.$emit('click', {})
    },
    hasPerms: function (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      if(perms == "true"){
        return true
      }
      else {
        return hasPermission(perms)
      }
    }
  },
  mounted() {
  }
}
</script>

到这里我们自己的权限组件就完成了

用的时候通过perms设置自己标识

<kt-button :label="$t('action.addrole')" perms="AuthorityManagement:RoleManagement:add" type="primary"   authType="primary" @click="handleAdd" />

这样 我们的权限按钮就完成了