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

r囧r小猫 2024-03-04 07:23 55阅读 0赞

## 序言 ##

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

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

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

![在这里插入图片描述][b1ba23ce09914c3d9ca50f94c3e87d13.png]

若依框架后端控制台菜单管理模块的关系理解图
    
    错误菜单关系：
    
    父菜单：
    		子菜单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. 若依——角色权限控制][1.]

[2. ruoyi-vue中v-if与v-hasPermi同时用出现的bug][2. ruoyi-vue_v-if_v-hasPermi_bug]

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

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

[b1ba23ce09914c3d9ca50f94c3e87d13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/04/8697a5cf1b984daab6a5ea65e3e5aee0.png
[1.]: https://blog.csdn.net/weixin_43848576/article/details/123335798?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-123335798-blog-131705822.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-123335798-blog-131705822.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=8
[2. ruoyi-vue_v-if_v-hasPermi_bug]: https://blog.csdn.net/jom31/article/details/131705822?spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-9-131705822-blog-118415933.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-9-131705822-blog-118415933.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=17
[3.]: https://blog.csdn.net/qq_42992729/article/details/118415933
[4. _vue3_ 9.]: https://www.jianshu.com/p/1218a89e0eb3