Vue权限控制
用户输入账号密码登录,登录成功后取到用户token,
根据token获取用户信息(个人信息,权限(按钮权限)等)
将按钮权限储存到localstorage中
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));
}
注:我是在router.beforeEach中使用
一.页面权限
根据用户 token调用后台接口取到该用户 token能看到的所有导航 因为直接返回该用户权限下的所有导航,所以不用做判断
二.按钮权限
Main.js中声明全局方法
//判断方法
function hasBtnPermission(permission){
//取出上面所存储的登录人按钮权限
let getBtnPermissionArr = JSON.parse(localStorage.getItem('btnPermission'));
//因为indexOf如果不包含的话就会返回-1 所以 -1不会大于-1 按钮就不会显示
//如果indexOf包含的话就会返回对应的第一次出现的位置,至少为0
//因此0 >-1 就会显示
return getBtnPermissionArr.indexOf(permission) > -1;
}
//全局注册方法
Vue.prototype.hasPerm = hasBtnPermission
//注解
permission参数为按钮所需的权限
getBtnPermissionArr 为取出储存到localstorage中登录人的全部按钮权限
判断getBtnPermissionArr 中是否包含permission
如果包含,就证明登录人有这个按钮的权限,则相反
Vue页面中使用v-if 调用注册的全局方法hasPerm
例:
<el-button size="small" @click="printFun" v-if="hasPerm('g')">打 印</el-button>
注:v-if 判断hasPerm(‘g’) 所传的g就是这个按钮所需的权限 因为上面声明的假数据数组里没有存在g 所以这个按钮不会显示
相反:
<el-button size="small" @click="printFun" v-if="hasPerm('b')">打 印</el-button>
注:v-if 判断hasPerm(‘b’) 所传的b就是这个按钮所需的权限 因为上面声明的假数据数组里存在b所以这个按钮就会显示