摘要：最近需要在原有的后台管理系统中，需要给页面中的所有按钮进行权限控制
实现的思路如下：
方法一：
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>方法二：获取和存后台的按钮权限是一样的，不同的是不写全局的方法，使用全局自定义指令，但我实现后，发现有个问题就是那个按钮权限是存在后台的按钮权限数组里的，我刷新页面后按钮就不见了，应该是有的。所以这个方法我还没研究好
