vue 按鈕級别權限控制實作

總結一下前端對于按鈕級别權限的控制方法，根據後端傳回的權限資料來實作不同權限的使用者展示不同的操作按鈕。實作方法有兩種：定義一個全局方法配合 v-if 指令；自定義指令。

首先，将接口傳回的權限資料儲存到 localStorage 裡。我們這裡以下面的格式為例：

1、定義一個全局方法配合 v-if 指令

在 utils 檔案夾建立一個 permission.js 檔案

//先擷取本地權限資料 permissions 
let btnPermission = (data) => {
	let permissions = JSON.parse(localStorage.getItem('permissions '));
	let isHave = permissions.includes(data);
	return isHave;
}
export default btnPermission;
           

在 main.js 裡面引入

import btnPermission from './utils/btnPermission.js';
Vue.prototype.$has = btnPermission;
           

然後再頁面上直接使用

<template>
	<div>
		<button v-if='$has('add')'>新增</button>
		<button v-if='$has('edit')'>編輯</button>
		<button v-if='$has('delete')'>删除</button>
	</div>
</template>
           

2、自定義指令

在 directive 檔案夾下面定義一個 permission.js 檔案

//先擷取本地權限資料 permissions 
import Vue from 'vue';
let has = {
	install(Vue){
		Vue.directive('has',{
			bind(el,binding,vnode){
				let {value} = binding;
				//判斷是否有權限
				let hasBtn = permissions.includes(value);
				//沒有權限則删除父元素，或者隐藏目前元素
				if (!hasBtn) {
			        if (!el.parentNode) {
			            el.style.display = 'none'
			        } else {
			            el.parentNode.removeChild(el)
			        }
		      	}
			}
		})
	}
}
export default has;
           

在 main.js 裡面引入

import has from './directive/btnPermissionjs';
Vue.use(has);
           

然後再頁面上直接使用

<template>
	<div>
		<button v-has='add'>新增</button>
		<button v-has='edit'>編輯</button>
		<button v-has='delete'>删除</button>
	</div>
</template>
           

菜單權限控制在這篇文章裡 《vue 菜單權限控制實作》