vue页面权限控制

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所以这个按钮就会显示