若依框架中实现角色权限细粒度控制

若依（RuoYi）是一个基于Spring Boot和Spring Cloud的开源快速开发平台，提供了丰富的功能模块，其中权限管理是其核心功能之一。角色权限细粒度控制在企业应用中尤为重要，它能够确保用户只能访问他们被授权的内容。本文将详细介绍如何在若依框架中实现角色权限的细粒度控制。

1. 权限管理基础

在若依框架中，权限管理主要包括以下几个方面：

• 用户（User）：系统中的操作者。
• 角色（Role）：用户的集合，表示一组权限。
• 菜单（Menu）：系统功能的入口。
• 按钮（Button）：菜单下的具体操作，如“新增”、“删除”等。

这些元素通过数据库表进行关联，并通过前端和后端结合实现权限控制。

数据库设计

若依框架中与权限相关的表包括：

• sys_user：存储用户信息。
• sys_role：存储角色信息。
• sys_menu：存储菜单信息。
• sys_role_menu：角色与菜单的关系表。
• sys_user_role：用户与角色的关系表。

这些表的设计使得每个用户可以拥有多个角色，而每个角色可以关联多个菜单和按钮。

2. 后端实现

2.1 菜单权限控制

若依框架通过拦截器或注解的方式对菜单进行权限校验。以拦截器为例，当用户访问某个URL时，拦截器会检查该用户是否有访问该菜单的权限。

@Component
public class PermissionInterceptor implements HandlerInterceptor {

    @Autowired
    private SysMenuService sysMenuService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String requestURI = request.getRequestURI();
        // 获取当前登录用户的角色和权限
        List<String> permissions = SecurityUtils.getPermissions();

        // 检查请求的URL是否在权限列表中
        if (permissions.contains(requestURI)) {
            return true;
        }

        // 如果没有权限，则返回403
        response.setStatus(HttpServletResponse.SC_FORBIDDEN);
        return false;
    }
}

2.2 按钮权限控制

按钮级别的权限控制通常通过自定义注解实现。例如，若依框架提供了一个@PreAuthorize注解，用于校验用户是否具有某个特定的操作权限。

@RestController
@RequestMapping("/user")
public class UserController {

    @PreAuthorize("hasPermission('/user/add', 'POST')")
    @PostMapping("/add")
    public ResponseEntity<?> addUser(@RequestBody User user) {
        // 添加用户逻辑
        return ResponseEntity.ok("用户添加成功");
    }
}

这里的hasPermission方法会根据用户的角色和权限动态判断是否允许执行该操作。

3. 前端实现

若依框架使用Vue.js作为前端框架，前端同样需要实现权限控制。对于菜单的显示，可以通过动态加载菜单数据来实现；对于按钮的显示，可以通过权限标识符来控制。

3.1 动态加载菜单

前端通过API获取当前用户的菜单数据，并根据返回的数据渲染导航栏。

// 调用后端接口获取菜单数据
axios.get('/menu').then(response => {
    const menuData = response.data;
    renderMenu(menuData); // 根据菜单数据渲染页面
});

3.2 按钮权限控制

在Vue组件中，可以使用v-if指令根据用户权限动态显示按钮。

<template>
    <div>
        <button v-if="hasPermission('user:add')">新增用户</button>
        <button v-if="hasPermission('user:delete')">删除用户</button>
    </div>
</template>

<script>
export default {
    methods: {
        hasPermission(permissionKey) {
            return this.$store.state.permissions.includes(permissionKey);
        }
    }
};
</script>

4. 流程图

以下是角色权限控制的整体流程图：

flowchart TD
    A[用户登录] --> B[获取用户角色]
    B --> C[根据角色获取权限]
    C --> D[渲染菜单和按钮]
    D --> E[用户操作触发权限校验]
    E --> F{是否具有权限?}
    F --是--> G[执行操作]
    F --否--> H[提示无权限]

5. 总结

通过上述步骤，我们可以看到若依框架是如何实现角色权限的细粒度控制的。无论是后端的拦截器、注解，还是前端的动态菜单和按钮控制，都体现了权限管理的灵活性和可扩展性。