vue后台管理系统根据不同 *** 作员设置页面按钮权限

需求：后台管理系统 需要不同身份的 *** 作员登录系统分别拥有不同的按钮权限
思路：给页面需要控制的每一个按钮一个唯一编码（id的意思），后端可以通过接口（我这个系统是登录接口返回的）返回当前登录 *** 作员所拥有的所有的按钮id数组集合 然后前端通过比对判断按钮是否显示 具体如下

1.保存后端返回的当前 *** 作员所拥有的所有按钮的id数组

代码如下（示例）：

后端返回：A *** 作员所拥有的需要控制权限的按钮id集合： buttons: [1001,2001,3001,4001]
前端保存：vuex或者保存本地 sessionStorage.setItem("buttons",JSON.stringfy(buttons||'[]'))

2.封装个方法判断当前 *** 作员是否有权限

utils/auth.js我的例子写在

export function isAuth (key) {
	return JSON.parse(sessionStorage.getItem("buttons" || '[]').indexOf(key）!== -1 || false
}

3.main.js全局配置一下

import {isAuth} form '@/utils/auth.js'
Vue.prototype.isAuth = isAuth

4.使用

// 例如页面有如下按钮
  <el-button disabled>默认按钮</el-button>
  <el-button v-if="isAuth(1001)" type="primary" disabled>主要按钮</el-button>
  <el-button v-if="isAuth(2001)" type="success" disabled>成功按钮</el-button>
  <el-button v-if="isAuth(4001)" type="info" disabled>信息按钮</el-button>
  <el-button v-if="isAuth(3001)" type="warning" disabled>警告按钮</el-button>
  <el-button v-if="isAuth(8001)" type="danger" disabled>危险按钮</el-button>

总结：如上 第一个按钮表示不受控制的按钮 即每个 *** 作员登录都可以 *** 控
第二个到第五个就是A *** 作员可以控制的需要设置权限的按钮（因为前面后端已经返回 就会根据匹配自动显示哪些按钮A可以 *** 作）
最后一个按钮A没有权限 即在A登录系统的时候页面不会出现这个按钮