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

最新推荐文章于 2025-04-14 15:20:09 发布

沐修

最新推荐文章于 2025-04-14 15:20:09 发布

阅读量1.2w

点赞数 3

分类专栏： Vue 文章标签： vue.js vue

本文链接：https://blog.youkuaiyun.com/qq_42701659/article/details/132759325

版权

Vue 专栏收录该内容

38 篇文章

订阅专栏

序言

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

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

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

在这里插入图片描述

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

错误菜单关系：

父菜单：
		子菜单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>