ruoyi-cloud如何配置按钮权限

配置按钮权限

首先，需要准备两个用户：

1. 管理员：ruoyi-cloud自带，默认是admin/admin123
2. 普通用户：在用户管理自己建一个，角色使用普通角色即可，比如test/123456

前往菜单管理创建按钮。

比如现在有一个业务模块，下面有一个菜单名为工程，在工程下新增两个按钮：

• 测试新增接口：权限标识是business:engr:add；
• 测试修改接口：权限标识是business:engr:edit。

前端按钮权限

现在前往前端页面，在页面上放两个模拟按钮，其中v-hasPermi="['business:engr:add']"用于指定按钮权限：

<el-row>
  <el-button @click="doAdd" v-hasPermi="['business:engr:add']">测试拥有按钮权限</el-button>
</el-row>
<el-row>
    <el-button @click="doEdit" v-hasPermi="['business:engr:edit']">测试没有按钮权限</el-button>
</el-row>

doAdd和doEdit两个事件可以简单放点交互逻辑。

默认情况下，管理员拥有全部权限，所以这两个按钮都可以调用。

现在我们给普通角色分配权限，系统管理-角色管理-普通角色-修改：

只给按钮1的权限，不给按钮2的权限。

然后登陆普通角色，前往前端页面，我们发现有权限的按钮才显示了，没权限的按钮不会显示：

后端接口权限

那么后端接口权限又是如何设定的呢？我们观察菜单，菜单分为目录、菜单和按钮，菜单和按钮都可以配置权限标识：

这意味着只要给角色分配了菜单和按钮，就意味着它拥有这些权限标识。

比如现在我们配置两个测试新增、测试修改对应的接口：

@RestController
@RequestMapping("/engr")
public class TestController {
    @GetMapping()
    public AjaxResult test() {
        return AjaxResult.success("hello, world，无需权限");
    }

    @RequiresPermissions("business:engr:add")
    @GetMapping("/add")
    public AjaxResult add() {
        return AjaxResult.success("测试调用新增接口成功");
    }

    @RequiresPermissions("business:engr:edit")
    @GetMapping("/edit")
    public AjaxResult edit() {
        return AjaxResult.success("测试调用编辑接口成功");
    }
}

我们可以打开系统工具-系统接口，切换普通用户登录，给以下token，可以发现测试新增接口可以调用，测试编辑接口调用会出现如下异常：

{
  "msg": "没有访问权限，请联系管理员授权",
  "code": 403
}

这是因为普通用户没有按钮2的权限，如果分配了就可以调用了。