需求:后台管理系统 需要不同身份的操作员登录系统分别拥有不同的按钮权限
思路:给页面需要控制的每一个按钮一个唯一编码(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登录系统的时候页面不会出现这个按钮