vue 前端通过查询 该用户的角色所拥有的权限， 控制页面按钮的显示

学习目标：

目标

• vue 前端通过查询 该用户的角色所拥有的权限， 控制页面按钮的显示

---

学习内容：

内容

1. 使用的插件 及 JS
2. 使用的属性 及 组件

---

知识小结：

总结

• 1、导入使用的依赖文件
  import util from “@/libs/util.js”
• 2、定义属性 addPermission: false,
• 3、created() {
  this.initPermission()
  },
• 4、initPermission(){
  let strArray = util.session.get(‘permissions’)
  this.addPermission = strArray.includes(‘inventory:task:add’)
  },
• 5、
  <el-button ref=“btnStatusAdd” size=“mini” icon=“el-icon-circle-plus” v-if=“addPermission” @click=“addHandle”>新增
  
• 6、 <el-button size=“mini” icon=“el-icon-folder-checked” v-show={ this.addPermission? true:false} onClick={ () => this.complete(row) } type=“primary”>
• 7、设置为禁用 disabled
• return [
  <el-button size=“mini” icon=“el-icon-edit” disabled={row.superUser==1 && row.currenId != 1 ? true:false} onClick={ () => this.addOrUpdateData(row) } type=“primary”>修改,
  <el-button size=“mini” icon=“el-icon-edit” type=“success” onClick={ () => this.updatePasswordData(row) }>更改密码
  ]

其它知识回顾：

一、vue中的逻辑运算符

1、&& 与 ，有假与为假

2、|| 或 ，有真或为真

3、! 非 ，取反

我们可以在同一v-if指令中使用它们：

&& =逻辑运算符 AND；只有两个操作数都为 true 时，才返回 true，否则返回 false。
|| =逻辑运算符 OR；如果两个操作数都为 true，或者其中一个为 true，就返回 true，否则就返回 false。