vue中封装权限按钮

需求:

在后台管理系统中,一般除了菜单配置权限,很多按钮也需要具备一定的权限,比如新增,修改,查询等等

步骤

首先可以在src>components中创建一个Permisssion文件,里面配置权限按钮的组件,比如我需要有一个叫做ktButton的组件
ktButton.vue组件内容如下

<template>
  <el-button
    :size="size"
    :type="type"
    class="filter-item"
    :icon="icon"
    :loading="loading"
    :disabled="!( hasPerms(perms) && !disabled )"
    @click="handleClick"
  >
    {{ label }}
  </el-button>
</template>

<script>
  // 禁用标识
  // :disabled="!hasPerms(perms)"
import { hasPermission } from '../Permission/index.js'
import debounce from '../../utils/debounce.js'
export default {
  name: 'KtButton',
  props: {
    icon: { // 按钮图标
      type: String,
      default: null
    },
    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
    },
    isDebounce: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function() {
      if (!this.isDebounce) {
        this.$emit('click', {})
      } else {
        debounce(() => {
          // 按钮操作处理函数
          this.$emit('click', {})
        }, 500)
      }
    },
    hasPerms: function(perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) // !this.disabled
    }
  }
}
</script>
<style>

</style>
代码片

可以看出这是对el-button进行的二次封装,是否禁用是根据hasPerms()这个函数的返回值决定的,
于是我们可以在同级目录下封装一个判断是否有权限的函数index.js

/**
 * 判断是否有权限。根据传入的权限标识，查看是否存在于用户的权限标识集合内。
 */
export function hasPermission(perms) {
	let hasPermission = false;
	let permission = JSON.parse(sessionStorage.getItem('permission'));
	//当然此处还可以使用indexOf方法,不使用for循环,indexOf性能也更好
	for (var i = 0; i < permission.length; i++) {
		if (permission[i] === perms) {
			hasPermission = true;
			break;
		}
	}
	return hasPermission;
}

在**sessionStorage.getItem(‘permission’)**中就保存了用户所有的按钮权限,一般在登录的时候就获取到了用户的这些信息

在vuex中设置权限数据,具体代码如下

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import tagsView from './modules/tagsView'
import { constantRoutes } from '../router/index'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		name: '',
		//设置属性,用于保存后台接口返回的权限数据
		permission: [],
	},
	mutations: {
		SET_NAME: (state, name) => {
			state.name = name
			},
		SET_PERMISSION(state, permission) { //permission 为传入的权限标识集合
			// 传入的权限集合 赋值给状态中的 permission
			sessionStorage.setItem('permission', JSON.stringify(permission));
		},
	},
	actions: { // 官方不推荐直接修改mutation， 可使用actions来提交 mutation
		SET_PERMISSION(context, permission) {
			// 提交到 mutation 中的 SET_PERMISSION 函数
			// context.commit("SET_PERMISSION", permission);
			sessionStorage.setItem('permission', JSON.stringify(permission));
		},
	}
})

export default store

在登录的页面,获取用户权限信息的时候就可以触发SET_PERMISSION这个方法

//res.data.data.menuPermission就是相应的权限数据
    this.$store.dispatch(
              "SET_PERMISSION",
              res.data.data.menuPermission
            );

在页面上需要显示权限的用法如下

比如一个新增按钮,传入的perms值device:equipment:add就是和后端商量好的,如果获取的权限信息有就可以使用,否则按钮就是被禁用的

  <KtButton
          size="mini"
          label="新增"
          perms="device:equipment:add"
          type="primary"
          icon="el-icon-plus"
          @click="openAddDialog"
        />

此时页面上你就可以配置权限按钮了