vue按钮级权限控制及权限按钮的封装

设计原理

对于vue按钮级权限控制主要是先给按钮设定一个权限吗，然后从数据库取出用户权限进行对比，如果用户权限中包含这个按钮的权限则按钮可用，不然就禁用。

获取用户所有权限

// 获取用户菜单
  getMenu({ commit, state }) {
    return new Promise((resolve, reject) => {
      getMenu().then(res => {
        const menu = res
        if (!menu) {
          reject('Verification failed, please Login again.')
        }
        // 获取按钮权限
        const perms = getOptionPremission(menu)
        // 将按钮权限存入vuex
        commit('SET_PREMS', perms)
        // 获取菜单权限
        const newMenu = converter(menu)
        const MenuTree = getMenuTree(newMenu)
        MenuTree.push(errorRouter)
        resetRouter()
        router.options.routes = MenuTree
        router.addRoutes(MenuTree)
        resolve(menu)
      }).catch(error => {
        reject(error)
      })
    })
  }

对比权限的方法

import store from '@/store'
/**
 * 判断用户是否拥有操作权限
 * 根据传入的权限标识，查看是否存在用户权限标识集合
 * @param perms
 */
export function hasPermission(perms) {
  let hasPermission = false
  const 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"
    :circle="circle"
    :icon="icon"
    :disabled="!hasPerms(perms)"
    @click="handleClick"
  >
    <span v-if="label!=null">{{ label }}</span>
  </el-button>
</template>

<script>
import { hasPermission } from '@/utils/permission.js'
export default {
  name: 'PermsButton',
  props: {
    label: {// 按钮显示文本
      type: String,
      default: null
    },
    size: {// 按钮尺寸
      type: String,
      default: 'mini'
    },
    type: {// 按钮类型
      type: String,
      default: 'primary'
    },
    disabled: {// 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {// 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },
    circle: {// 按钮图形
      type: Boolean,
      default: false
    },
    icon: {// 按钮所带有的图标
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick() {
      // 按钮操作处理函数
      this.$emit('click', {})
    },
    hasPerms(perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) & !this.disabled
    }
  }
}
</script>

<style scoped>
</style>

封装按钮的引入与使用

引入

import PermsButton from '@/components/PermsButton/index'
export default {
	components: { PermsButton },
}

使用

<perms-button type="success" perms="saveResource" label="增加" icon="el-icon-circle-plus-outline" @click="saveResource()" />
<perms-button type="danger" perms="deleteResource" label="删除" icon="el-icon-delete" @click="delSelectResource()" />
<perms-button type="warning" perms="updateResource" label="修改" icon="el-icon-edit" @click="updateSelectResource()" />

perms就是按钮的权限，拥有这个权限的用户才能使用

效果图