根据权限控制按钮封装一个组件

---

目录

前言

一、录入按钮权限。

二、封装一个判断是否拥有该按钮权限的方法。

三、封装一个自定义按钮组件

四、引入组件并使用

总结

---

前言

之前写过Vue动态添加路由，从而实现根据权限来控制对页面的访问。当然，权限控制里面只是控制到路由的话还是不够的，有时候我们还需要对页面上的按钮进行权限控制。如[增、删、改、查]操作。

一、录入按钮权限。

假如我们现在有一个新闻管理列表页面，这个列表有增删改查四个操作，我们在向系统录入路由的时候，就可以把这个路由页面会用到的按钮权限一并录入，并挂载到路由下。按钮权限的标识我们分别设定为[news:create,news:retrieve,news:update,news:delete]。录入好了之后，在登录系统之后，后端就会以返回数组的方式返回该账号所有已获得的按钮权限集合。

二、封装一个判断是否拥有该按钮权限的方法。

/**
 * 判断是否有权限。根据传入的权限标识，查看是否存在于用户的权限标识集合内。
 *  perms 为该按钮的权限标识
 */
export function hasPermission (perms) {
	let hasPermissionFlag = false;
    // 获取登录后缓存的按钮权限集合 如['news:create','news:retrieve','news:update','news:delete'] 
	let {btnAuth:permission} = JSON.parse(window.sessionStorage.getItem('auth'));
	for (var i = 0; i < permission.length; i++) {
		if(permission[i] == perms){
			hasPermissionFlag = true;
			break;
		}
	}
	return hasPermissionFlag;
}

三、封装一个自定义按钮组件

<template>
  <div>
     <div v-if="hasPerms(perms)">
      <slot></slot>
     </div>
  </div>
</template>
 
<script>
// 引入之前封装的方法
import { hasPermission } from "@/utils/hasPermission.js";
export default {
  name: "KtButton",
  props: {
    perms: {
      // 按钮权限标识，外部使用者传入
      type: String,
      default: null,
    },
  },
  data() {
    return {};
  },
  methods: {
    hasPerms: function (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms);
    },
  },
};
</script>
<style scoped>

</style>

四、引入组件并使用

<template>
  <div>
     <my-button  :perms="'news:create'">新增</my-button>
     <my-button  :perms="'news:delete'">删除</my-button>
     <my-button  :perms="'news:update'">编辑</my-button>
     <my-button  :perms="'news:retrieve'">查看</my-button>
  </div>
</template>
 
<script>
// 引入自定义组件
import MyButton from '@/components/MyButton';
export default {
  name: "news",
  components:{
    MyButton,
  }
  data() {
    return {};
  },
};
</script>
<style scoped>

</style>

---

总结

这样我们就完成了对按钮的权限控制。是不是很简单？关于菜单权限控制和按钮权限控制，设计思路是参考的jeecgBoot。感兴趣的可以去看一下页面按钮权限用法 · JeecgBoot 开发文档 · 看云