【vue】按钮权限的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了【vue】按钮权限的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

普通按钮或者组件按钮，都可。

问题描述

判断用户是否拥有新增、编辑、删除、查询等功能的按钮权限。

具体操作：

先获取权限集合，存储到vxe中------一般都是在接口里面获取
创建js页面，封装函数
创建子组件页面，封装button组件
再到所需的父组件页面引用子组件页面

实现：

举个例子：在首页中拿个函数，把权限存储到vxe中

initData(){
	let arr = [
		"dept:shareDept:add",
		"dept:shareDept:edit"
	]
	store.commit("setPerms",arr)
}

2. 在src目录下创建个目录[permission]，再创个index.js文件

/*
  * index.js
*/

import store from '@/store'
 
 export function hasPermission(perms){
	 let hasPermission = false; //决定按钮的禁用启用
	 let permissions = store.state.index.perms; //某某js页面的变量，此变量包含所有权限集合
	 for (let i = 0, len = permissions.length; i < len; i++) {
			if(permissions[i]===perms){ //permissions是否含有所传来的perms
				hasPermission = true; //启用
				break;
			}
	 }
	 return hasPermission
 }

//vxe页面
export default{
	state: {
		perms:[]
	},
	getters: {
		
	},
	mutations: {
		setPerms(state,perms){
			state.perms = perms
			console.log(state.perms);
		}
	},
	actions: {
	},
	modules: {
	}
}

3.在components创建KtButton页面，用来封装按钮组件

<!-- KtButton页面 -->
<template>
	<el-button 
		:size="size"
		:type="type"
		:plain="plain"
		:round="round"
		:icon="icon"
		:loading="loading"
		:disabled="!hasPerms(perms)"
		@click="handleClick"
	>
	{{label}}
	</el-button>
</template>

<script>
	import {hasPermission} from "@/permission/index.js"
	export default{
		name:"KtButton",
		props:{
			label:{     //按钮显示文本
				type:String,
				default:""
			},
			size:{      //按钮尺寸
				type:String,
				default:"mini"
			},
			type:{      //按钮类型
				type:String,
				default:null
			},
			plain:{      //按钮镂空
				type:Boolean,
				default:false
			},
			round:{      //按钮圆角
				type:Boolean,
				default:false
			},
			icon:{      //按钮图标
				type:String,
				default:""
			},
			loading:{      //按钮加载状态
				type:Boolean,
				default:false
			},
			perms:{        //按钮权限标识，外部使用者传入
				type:String,
				default:null
			},
			disabled:{     //按钮是否禁用
				type:Boolean,
				default:false
			}
		},
		data(){
			return{}
		},
		methods:{
            //按钮事件
			handleClick(){
				this.$emit("click",{})
			},
            //是否禁用的函数
			hasPerms(perms){
				console.log(perms);
				return hasPermission(perms) & !this.$props.disabled
			}
		}
	}
</script>

4. 在所需页面使用按钮

<template>
	<div>
		<!-- 按钮 -->
		<kt-button label="新增" perms="dept:shareDept:add" type="success" plain />
		<kt-button label="搜索" perms="dept:shareDept:search" type="primary"  />
		<kt-button label="编辑" perms="dept:shareDept:edit" type="primary" plain />
	</div>
</template>

<script>
    import KtButton from "@/components/KtButton"//引用按钮组件
    export default{
		components:{
			KtButton
		},
    }
</script>