vue按钮权限控制

封装Permission组件

<!-- -->
<template>
  <span v-if="hasPermission" class="permission">
    <slot />
  </span>
</template>

<script>
import {
      mapState } from 'vuex'
export default {
     
  name: 'Permission',
  props: {
     
    has: {
     
      default: null,
      type: String
    }
  },
  data() {
     
    return {
     
      hasPermission: false
    }
  },
  computed: {
     
    ...mapState({
     
      asyncRouterMap: state => state.user.asyncRouterMap
    })
  },
  watch: {
     
    has: {
     
      handler: function(val, oldVal) {
     
        this.has = val
      },
      deep: true
    }
  },

  mounted() {
     
    // console.log('this.asyncRouterMap', this.asyncRouterMap)
    this.hasPermissionFunc()
  },
  methods: {
     
    hasPermissionFunc() {
     
      // 当前用户的权限列表
      const self = this
      let flag = false
      function traverse(arr) {
     
        arr.map((item, index) => {
     
          if (item.childNode) {
      // 判断是否有子级，是则继续遍历
            traverse(item.childNode)
          } else {
     
            if (item.url === self.has) {
     
              flag = true
              return
            }
          }
        })
      }
      traverse(self.asyncRouterMap)
      this.hasPermission = flag
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

使用方法

<Permission :has="'info:approve'">
                  <el-popconfirm slot="reference" class="ml10" title="审核通过？" confirm-button-text="同意"
                                 cancel-button-text="驳回" @onCancel="submitAudit(scope.$index, pageData.records,1)" @onConfirm="submitAudit(scope.$index, pageData.records,3)"
                  >
                    <el-button v-if="scope.row.state=='2'" slot="reference" class="textBtn" type="text" size="small">
                      审批
                    </el-button>
                  </el-popconfirm>
                </Permission>