上篇文章说到Vue+ElementUI根据用户权限设置button显示和隐藏,但是一些功能不适合直接将button隐藏,比如表格中的编辑和删除按钮,所以根据用户权限判断button是否可以执行点击事件是比较好的。话不多说,上流程:
- package.json中引入js-cookie依赖
没有的话需要安装
npm install js-cookie --save
- 在登录组件中导入js-cookie并对Cookies的参数进行set传值
- 在需要处理的button所在的vue组件中引入Cookies,用来获取当前用户名
- 对el-button的@click方法进行判断
<el-button
type="warning"
size="mini"
plain
icon="el-icon-edit"
@click="openDialog(2, scope.row)"
>
编辑
</el-button>
找到openDialog方法,写if语句判断,如果当前用户不是管理员,弹框提示,否则执行编辑方法。
openDialog(type, row) {
if (Cookies.get('username') !== 'admin') {
this.$alert('您不是管理员,无法使用此功能,请联系管理员老师!', '提示', {
type: 'warning'
})
} else {
this.clearDialog()
this.dialogTitle = '编辑研究方向'
this.editDialogText.id = row.id
this.editDialogText.teacher = row.teacher
this.editDialogText.search_direction = row.search_direction
this.dialogVisible = true
}
},
5.测试:使用非管理员账号登录并点击编辑按钮,弹框提示如下图。