若依框架 - 角色按钮权限控制 v-hasPermi=“[‘system:role:add‘]“ | v-if=“checkPermi([‘system:role:add‘])“ 特别用法

序言

若依框架的权限标识，需要手动在控制台添加菜单，首先在父菜单下点击新增菜单，然后再选择按钮，然后再输入按钮的菜单名称和排序顺序，以及最重要的权限标识。

权限标识格式：父菜单:子菜单:子菜单按钮

注意：子菜单的按钮菜单所属父菜单是在父菜单，而不是在子菜单下的按钮菜单。

若依框架后端控制台菜单管理模块的关系理解图

错误菜单关系：

父菜单：
		子菜单1：
				子菜单1按钮：
		子菜单2：		
				子菜单2按钮：
###############################################				
正确菜单关系：

父菜单：
		子菜单1：
		子菜单1按钮：
		子菜单2：		
		子菜单2按钮：

上面的菜单顺序，是由于用户权限分配角色的操作所决定的，会有点古怪，但真实操作给用户进行角色分配时，是非常有用灵活的。

一、v-if=“checkPermi([‘xxxxx:xxxx:xxx’])” 特别用法

以权限标识 system:role:add 为例：

<el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-if="checkPermi(['system:role:add'])"
        >新增</el-button>
        
<div v-else>没有新增权限</div>

二、v-hasPermi=“[‘xxxxxx:xxxx:xxx’]” 正常用法

以权限标识 system:role:edit 为例：

<el-button
		  type="success"
		  plain
		  icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
        >修改</el-button>

---

参考链接

1. 若依——角色权限控制

2. ruoyi-vue中v-if与v-hasPermi同时用出现的bug

3. 记录一下若依权限的使用

4. [vue3进阶] 9.自定义指令