Vue+ElementUI根据用户权限设置button不同功能

上篇文章说到Vue+ElementUI根据用户权限设置button显示和隐藏，但是一些功能不适合直接将button隐藏，比如表格中的编辑和删除按钮，所以根据用户权限判断button是否可以执行点击事件是比较好的。话不多说，上流程：

1. package.json中引入js-cookie依赖
   
   没有的话需要安装

npm install js-cookie --save

2. 在登录组件中导入js-cookie并对Cookies的参数进行set传值
   
3. 在需要处理的button所在的vue组件中引入Cookies，用来获取当前用户名
   
4. 对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.测试：使用非管理员账号登录并点击编辑按钮，弹框提示如下图。