ruoyi-vue-plus 权限

### RuoYi-Vue-Plus 权限管理实现方式 RuoYi-Vue-Plus 是基于 Spring Boot 和 Vue 技术栈构建的前后端分离权限管理系统。该系统的权限管理模块设计合理，能够满足大多数企业级应用的需求。 #### 后端权限控制机制 后端采用 Spring Security 进行安全认证和授权处理[^5]。通过配置 `WebSecurityConfigurerAdapter` 类来定义 HTTP 请求的安全策略： ```java @EnableWebSecurity public class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers("/auth/**").permitAll() // 登录接口无需鉴权 .anyRequest().authenticated(); // 其他请求都需要验证身份 http.addFilterBefore(new JwtAuthenticationTokenFilter(), UsernamePasswordAuthenticationFilter.class); } } ``` 为了简化开发工作量并提高效率，还集成了 MyBatis-Plus 工具库用于数据库操作[^1]。这使得开发者可以在 DAO 层面专注于业务逻辑编写而不必关心复杂的 SQL 编写细节。 对于角色与菜单资源之间的关联关系维护，则是在数据库表结构层面进行了精心的设计。通常会存在如下几张核心表格： - sys_user 用户信息表； - sys_role 角色信息表； - sys_menu 菜单信息表； - sys_role_menu 中间件用来表示某个特定的角色拥有哪些菜单访问权限。 当用户登录成功之后，系统会根据当前用户的所属角色查询其对应的菜单列表，并将其缓存到 Redis 或者内存当中以便快速响应前端页面加载时所需的导航栏数据展示需求。 #### 前端权限控制机制 前端部分主要依赖于 Vue Router 结合 Element UI 组件来进行路由级别的权限校验以及按钮级别细粒度的操作权限判定。具体做法如下所示： 1. **初始化阶段**：在应用程序启动之初便向服务端发起一次异步请求获取已登录账户所具备的功能点集合。 2. **动态注册组件**：依据上述返回的结果自动生成相应的视图容器实例对象并将它们挂载至全局变量之上供后续渲染过程中按需引入使用。 3. **指令式编程模型**：借助 v-if/v-show 等内置语法糖标签配合 computed 计算属性完成界面元素显示隐藏状态切换效果呈现给最终使用者看。 此外，在某些特殊场景下还可以利用 JavaScript 的 Proxy 对象监听目标对象的变化情况从而实现实时更新UI界面上对应区域的内容变化反映最新的权限变更状况。 #### 示例代码片段 以下是关于如何在前端项目中实现简单的权限判断的一个例子： ```javascript // src/utils/auth.js export function hasPermission(permissionList, permissionKey) { return permissionList.some(item => item === permissionKey); } // 在 vue 文件中的 usage <template> <div> <!-- 如果有 'add' 权限则显示 --> <button v-if="hasPermission(permissions, 'add')">Add</button> <!-- 使用计算属性的方式也可以 --> <span v-if="canEdit">编辑</span> </div> </template> <script> import { mapGetters } from 'vuex'; import { hasPermission } from '@/utils/auth'; export default { name: 'ExampleComponent', computed: { ...mapGetters(['permissions']), canEdit() { return this.hasPermission('edit'); }, }, }; </script> ``` #### 解决常见问题的方法 如果遇到无法正常显示菜单或者按钮的情况，首先要确认的是后台传过来的数据是否正确无误；其次检查 Vuex Store 是否已经存储了最新版的权限列表；最后排查是否存在网络延迟导致初次进入页面时尚未接收到完整的权限信息造成短暂性的视觉异常现象发生。