摘要：最近需要在原有的后台管理系统中，需要给页面中的所有按钮进行权限控制

实现的思路如下：

方法一：

1、获取后台传过来的按钮权限数组，并将其保存下来

2、写一个全局的方法。判断某个按钮的权限是否含在后台传的按钮权限数组中

3、页面中在按钮上写v-if进行控制

代码如下：

• 首先我获取后台传给我的按钮权限数组，我的这个是通过用户权限的接口来获得的（在这就用模拟数据）

后台的按钮权限数据模拟：（项目中我的这个数据是放在home.vue因为这个页我获取的用户信息）

let btnPermissionArr = ['a','b','c','d','e','f']; //模拟的后台给的按钮权限数据
/* 我们需要对btnPermissionArr进行全局存储，我这里使用的localStorage;*/
if(!window.localStorage){
   alert("浏览器不支持localstorage");
}else{   
/* 因为localStorage不可以直接存数组，这里的JSON.stringify(btnPermissionArr)转成字符串*/ 
    window.localStorage.setItem("btnPermission",JSON.stringify(btnPermissionArr));
}

• 在main.js页面拿到存储的按钮权限数据，并写一个全局方法

/*首先拿到存在localStorage的后台按钮数据*/
/*取localStorage的后台按钮数据是字符串，我们实际想要的是数组，所以要将字符串转为数组，JSON.parse(localStorage.getItem('btnPermission'))*/
/* 写一个全局的方法判断是否含有按钮的权限*/
function hasBtnPermission(permission){
	let getBtnPermissionArr = JSON.parse(localStorage.getItem('btnPermission'));
	// console.log(permission);
	// console.log(getBtnPermissionArr )
	// console.log(getBtnPermissionArr .indexOf(permission) > -1)
	return getBtnPermissionArr.indexOf(permission) > -1;
}
Vue.prototype.hasPerm = hasBtnPermission;

 在按钮的页面就可以进行控制了

/*举例按钮的权限含在后台权限数组里，就可以显示出来*/
<el-button size="small"v-if="hasPerm('a')">详情</el-button>

/*举例按钮的权限不含在后台权限数组里，不显示出来*/
<el-button size="small"v-if="hasPerm('h')">删除</el-button>

 方法二：获取和存后台的按钮权限是一样的，不同的是不写全局的方法，使用全局自定义指令，但我实现后，发现有个问题就是那个按钮权限是存在后台的按钮权限数组里的，我刷新页面后按钮就不见了，应该是有的。所以这个方法我还没研究好