首页
/ RuoYi-Vue3权限管理系统详解

RuoYi-Vue3权限管理系统详解

2026-02-04 04:28:34作者：庞眉杨Will
RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
项目地址：https://gitcode.com/yangzongzhuan/RuoYi-Vue3

RuoYi-Vue3 的权限管理系统基于经典的 RBAC（Role-Based Access Control）模型设计，通过角色与权限的关联，实现了灵活且高效的权限控制。本文将深入剖析其实现细节，包括核心数据结构、权限校验流程、动态路由与菜单权限控制、数据权限与按钮权限设计，以及系统的扩展与优化策略。

RBAC权限模型实现

RuoYi-Vue3 的权限管理系统基于经典的 RBAC（Role-Based Access Control）模型设计，通过角色与权限的关联，实现了灵活且高效的权限控制。本节将深入剖析其实现细节，包括核心数据结构、权限校验流程以及代码示例。

核心数据结构

RBAC 模型的核心在于角色与权限的映射关系。以下是 RuoYi-Vue3 中与 RBAC 相关的关键数据结构：

  1. 用户（User）：系统中的操作者，通过角色关联权限。
  2. 角色（Role）：权限的集合，用户通过角色间接拥有权限。
  3. 权限（Permission）：定义具体的操作权限，如菜单访问、按钮操作等。
classDiagram
    class User {
        +id: number
        +username: string
        +password: string
        +roles: Role[]
    }
    class Role {
        +id: number
        +name: string
        +permissions: Permission[]
    }
    class Permission {
        +id: number
        +name: string
        +code: string
    }
    User "1" *-- "n" Role
    Role "1" *-- "n" Permission

权限校验流程

RuoYi-Vue3 的权限校验分为前端和后端两部分：

  1. 前端校验：通过 Vue 指令（如 v-hasPermi 和 v-hasRole）动态控制页面元素的显示与隐藏。
  2. 后端校验：通过拦截器验证用户请求的合法性。
sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    User->>Frontend: 发起请求
    Frontend->>Backend: 携带Token
    Backend->>Backend: 校验Token及权限
    alt 权限通过
        Backend->>Frontend: 返回数据
    else 权限不足
        Backend->>Frontend: 返回403
    end

代码实现示例

以下是 RuoYi-Vue3 中 RBAC 实现的关键代码片段：

1. 前端权限指令

在 src/directive/permission/hasPermi.js 中，定义了 v-hasPermi 指令，用于校验用户是否拥有指定权限：

import store from '@/store'

export default {
    mounted(el, binding) {
        const { value } = binding
        const permissions = store.getters && store.getters.permissions
        if (value && value instanceof Array && value.length > 0) {
            const hasPermission = permissions.some(permission => {
                return value.includes(permission)
            })
            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error('请设置操作权限值')
        }
    }
}

2. 后端权限拦截

在 src/store/modules/permission.js 中，通过动态路由实现权限过滤：

const actions = {
    generateRoutes({ commit }, roles) {
        return new Promise(resolve => {
            let accessedRoutes
            if (roles.includes('admin')) {
                accessedRoutes = asyncRoutes || []
            } else {
                accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
            }
            commit('SET_ROUTES', accessedRoutes)
            resolve(accessedRoutes)
        })
    }
}

表格：权限与角色映射示例

权限代码 权限描述 关联角色
system:user:view 查看用户管理 admin, editor
system:user:edit 编辑用户信息 admin
monitor:log:view 查看操作日志 admin, auditor

通过以上实现，RuoYi-Vue3 的 RBAC 模型能够灵活地适应各种业务场景，确保系统的安全性和可维护性。

动态路由与菜单权限控制

在RuoYi-Vue3中，动态路由与菜单权限控制是权限管理系统的核心功能之一。通过动态路由，系统可以根据用户的角色和权限动态生成可访问的路由表，而菜单权限控制则确保用户只能看到和操作自己有权限的菜单项。以下将详细介绍其实现原理和关键代码。

动态路由的实现

动态路由的核心逻辑位于src/permission.js和src/store/modules/permission.js中。以下是其关键流程：

  1. 路由拦截与权限验证
    在用户登录后，系统会通过路由拦截器（permission.js）验证用户权限，并根据权限动态生成路由表。

    router.beforeEach(async (to, from, next) => {
    const hasToken = getToken();
    if (hasToken) {
        if (to.path === '/login') {
            next({ path: '/' });
        } else {
            const hasRoles = store.getters.roles && store.getters.roles.length > 0;
            if (hasRoles) {
                next();
            } else {
                try {
                    const { roles } = await store.dispatch('user/getInfo');
                    const accessRoutes = await store.dispatch('permission/generateRoutes', roles);
                    router.addRoutes(accessRoutes);
                    next({ ...to, replace: true });
                } catch (error) {
                    await store.dispatch('user/resetToken');
                    next(`/login?redirect=${to.path}`);
                }
            }
        }
    } else {
        next('/login');
    }
});

  2. 动态路由生成
    在permission.js中，generateRoutes方法会根据用户角色从后端获取菜单数据，并转换为前端路由表。

    const generateRoutes = (roles) => {
    return new Promise((resolve) => {
        let accessedRoutes;
        if (roles.includes('admin')) {
            accessedRoutes = asyncRoutes || [];
        } else {
            accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
        }
        commit('SET_ROUTES', accessedRoutes);
        resolve(accessedRoutes);
    });
};

菜单权限控制

菜单权限控制通过src/store/modules/permission.js中的SET_ROUTES方法实现。系统会根据用户角色过滤菜单数据，并生成最终的菜单列表。

const filterAsyncRoutes = (routes, roles) => {
    const res = [];
    routes.forEach((route) => {
        const tmp = { ...route };
        if (hasPermission(roles, tmp)) {
            if (tmp.children) {
                tmp.children = filterAsyncRoutes(tmp.children, roles);
            }
            res.push(tmp);
        }
    });
    return res;
};

关键流程图

以下是一个简化的动态路由与菜单权限控制流程图：

sequenceDiagram
    participant User
    participant Router
    participant Permission
    participant Store

    User->>Router: 访问路由
    Router->>Permission: 检查权限
    Permission->>Store: 获取用户角色
    Store->>Permission: 返回角色数据
    Permission->>Router: 动态生成路由
    Router->>User: 渲染对应页面

代码示例

以下是一个动态路由配置的示例：

const routes = [
    {
        path: '/system',
        component: Layout,
        meta: { title: '系统管理', icon: 'system', roles: ['admin'] },
        children: [
            {
                path: 'user',
                component: () => import('@/views/system/user/index'),
                meta: { title: '用户管理', roles: ['admin'] }
            }
        ]
    }
];

总结

通过动态路由与菜单权限控制，RuoYi-Vue3实现了灵活的权限管理功能，确保了用户只能访问自己有权限的页面和菜单项。这种设计不仅提高了系统的安全性，还优化了用户体验。

数据权限与按钮权限设计

在RuoYi-Vue3权限管理系统中，数据权限与按钮权限的设计是核心功能之一，它确保了系统资源的安全性和操作的合规性。本节将深入探讨其实现原理和使用方法。

按钮权限设计

按钮权限通过自定义指令v-hasPermi和v-hasRole实现，分别用于验证用户是否具备操作权限或角色权限。以下是其核心实现逻辑：

  1. v-hasPermi指令
    该指令用于验证用户是否具备指定的操作权限。其实现逻辑如下：

    • 从用户Store中获取当前用户的权限列表。
    • 检查绑定的权限值是否在用户权限列表中。
    • 若权限不匹配，则移除对应的DOM元素。
    // src/directive/permission/hasPermi.js
import useUserStore from '@/store/modules/user'

export default {
  mounted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*"
    const permissions = useUserStore().permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

  2. v-hasRole指令
    该指令用于验证用户是否具备指定的角色权限。其实现逻辑与v-hasPermi类似，但针对角色进行验证。

    // src/directive/permission/hasRole.js
import useUserStore from '@/store/modules/user'

export default {
  mounted(el, binding, vnode) {
    const { value } = binding
    const super_admin = "admin"
    const roles = useUserStore().roles

    if (value && value instanceof Array && value.length > 0) {
      const roleFlag = value
      const hasRole = roles.some(role => {
        return super_admin === role || roleFlag.includes(role)
      })

      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置角色权限标签值`)
    }
  }
}

数据权限设计

数据权限通过后端接口和前端逻辑共同实现，确保用户只能访问其权限范围内的数据。以下是其核心流程：

  1. 后端接口
    后端根据用户的角色和数据权限范围，动态生成SQL查询条件，限制数据返回。

  2. 前端逻辑
    前端通过以下方式实现数据权限的展示控制：

    • 使用v-if或v-show指令动态显示数据。
    • 通过API请求参数传递数据权限范围。
    // 示例：动态查询数据
const queryParams = {
  dataScope: useUserStore().dataScope
}
getList(queryParams).then(response => {
  // 处理数据
})

权限验证流程图

以下是一个权限验证的流程图，展示了按钮权限和数据权限的验证流程：

flowchart TD
    A[用户操作] --> B{是否具备权限?}
    B -->|是| C[执行操作]
    B -->|否| D[隐藏或禁用操作]

示例代码

以下是一个使用v-hasPermi指令的示例：

<template>
  <el-button v-hasPermi="['system:user:add']">新增用户</el-button>
</template>

总结表格

功能 指令/方法 用途
按钮权限 v-hasPermi 验证用户是否具备操作权限
按钮权限 v-hasRole 验证用户是否具备角色权限
数据权限 动态SQL查询 限制用户访问数据范围

权限系统的扩展与优化

RuoYi-Vue3 的权限系统基于 Vue3 和 Element Plus 构建，提供了灵活的权限控制机制。通过 v-hasPermi 和 v-hasRole 指令，开发者可以轻松实现按钮级别的权限控制。本节将探讨如何扩展和优化权限系统，以满足更复杂的业务需求。

1. 权限指令的扩展

RuoYi-Vue3 默认提供了 v-hasPermi 和 v-hasRole 指令，分别用于检查用户是否拥有指定权限或角色。以下是一个典型的权限指令使用示例：

<el-button v-hasPermi="['system:user:add']">新增用户</el-button>
<el-button v-hasRole="['admin']">管理员操作</el-button>

扩展指令功能

如果需要更复杂的权限逻辑，可以通过扩展指令来实现。例如，可以新增一个 v-hasAnyPermi 指令，用于检查用户是否拥有任意一个权限：

// 在 src/directive/permission/hasAnyPermi.js 中定义新指令
import store from '@/store';

export default {
  mounted(el, binding) {
    const { value } = binding;
    const permissions = store.getters.permissions;

    if (value && Array.isArray(value)) {
      const hasPermission = value.some(permission => permissions.includes(permission));
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error('v-hasAnyPermi 指令需要传入权限数组');
    }
  }
};

注册新指令

在 src/directive/index.js 中注册新指令：

import hasAnyPermi from './permission/hasAnyPermi';

export function setupDirectives(app) {
  app.directive('hasAnyPermi', hasAnyPermi);
}

2. 动态权限加载

默认情况下，权限数据在用户登录时加载并存储在 Vuex 中。但在某些场景下，可能需要动态加载权限数据。例如，当用户切换角色时，可以重新加载权限：

// 在 src/store/modules/permission.js 中新增动态加载方法
const actions = {
  async loadPermissions({ commit }, roleId) {
    const response = await getPermissionsByRole(roleId); // 假设这是一个 API 调用
    commit('SET_PERMISSIONS', response.data);
  }
};

使用动态权限

在组件中调用动态加载方法：

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions('permission', ['loadPermissions']),
    async changeRole(roleId) {
      await this.loadPermissions(roleId);
    }
  }
};
</script>

3. 权限缓存优化

为了提高性能，可以将权限数据缓存在本地存储中。以下是一个简单的缓存实现：

// 在 src/utils/auth.js 中新增缓存方法
export const setPermissionsCache = (permissions) => {
  localStorage.setItem('permissions', JSON.stringify(permissions));
};

export const getPermissionsCache = () => {
  const permissions = localStorage.getItem('permissions');
  return permissions ? JSON.parse(permissions) : [];
};

在 Vuex 中使用缓存

在 src/store/modules/permission.js 中修改权限加载逻辑：

const actions = {
  async loadPermissions({ commit }) {
    let permissions = getPermissionsCache();
    if (!permissions.length) {
      const response = await getPermissions(); // 假设这是一个 API 调用
      permissions = response.data;
      setPermissionsCache(permissions);
    }
    commit('SET_PERMISSIONS', permissions);
  }
};

4. 权限与路由的动态绑定

RuoYi-Vue3 的路由权限通过 src/permission.js 控制。如果需要动态绑定路由权限，可以修改路由守卫逻辑：

// 在 src/permission.js 中动态加载路由权限
router.beforeEach(async (to, from, next) => {
  const hasPermissions = store.getters.permissions.length > 0;
  if (!hasPermissions) {
    await store.dispatch('permission/loadPermissions');
  }
  next();
});

5. 权限系统的性能优化

为了减少权限检查的性能开销，可以使用以下优化策略：

  1. 预计算权限：在用户登录时预计算所有权限，避免重复检查。
  2. 懒加载权限：仅在需要时加载权限数据。
  3. 使用缓存：如第 3 点所述，缓存权限数据。

以下是一个预计算权限的示例：

// 在 src/store/modules/permission.js 中预计算权限
const getters = {
  hasPermission: (state) => (permission) => {
    return state.permissions.includes(permission);
  },
  hasAnyPermission: (state) => (permissions) => {
    return permissions.some(permission => state.permissions.includes(permission));
  }
};

总结表格

优化点 实现方式 适用场景
扩展指令 新增 v-hasAnyPermi 指令 需要检查多个权限之一的场景
动态权限加载 通过 API 动态加载权限数据 用户角色切换时
权限缓存 使用 localStorage 缓存权限数据 减少重复请求
路由动态绑定 在路由守卫中动态加载权限 动态路由权限控制
性能优化 预计算权限、懒加载、缓存 提升系统响应速度

通过以上扩展和优化，RuoYi-Vue3 的权限系统可以更好地满足复杂业务需求，同时保持高性能和灵活性。

RuoYi-Vue3 的权限管理系统通过 RBAC 模型实现了灵活且高效的权限控制，涵盖了角色与权限的映射、动态路由与菜单权限、数据与按钮权限等多个方面。系统支持通过自定义指令（如 v-hasPermi 和 v-hasRole）实现细粒度的权限控制，并通过动态路由、权限缓存和性能优化策略提升了系统的安全性和响应速度。通过扩展指令功能、动态权限加载和路由绑定，该系统能够适应复杂的业务场景，为开发者提供了强大的权限管理工具。

RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
项目地址：https://gitcode.com/yangzongzhuan/RuoYi-Vue3
登录后查看全文

相关内容推荐

1 5分钟快速上手：RuoYi-FastAPI企业级后台管理系统完整指南2 RuoYi-Vue3核心功能全解析：从用户管理到系统监控3 【亲测免费】 探索高效开发新境界：RuoYi-Vue3-FastAPI框架全面解析4 RuoYi-Vue革命性升级：SpringBoot 3.x + Vue3整合指南5 RuoYi-Vue3项目部署与运维6 【限时免费】 RuoYi-Cloud-Vue3 微服务架构技术文档7 RuoYi-Vue3-FastAPI 项目亮点解析8 【免费下载】 深入剖析若依RuoYi框架：一份全面的技术笔记9 RuoYi-Vue3前后端联调技巧：接口文档与Mock服务使用10 【免费下载】 RuoYi-Vue3-FastAPI：基于Vue3与FastAPI的高效后台管理系统搭建教程
热门项目推荐
相关项目推荐

热门内容推荐

1 【亲测免费】 开源项目 `build-your-own-x` 使用指南2 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解3 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用4 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

MsgViewer终极指南：轻松打开MSG文件的免费邮件查看器PiliPlus终极体验指南：解锁B站第三方客户端的完整功能秘籍Shutter Encoder视频转换神器：从小白到高手的效率革命直播抢码实战秘籍：5步搞定智能扫码登录，成功率提升300%如何快速掌握SillyTavern版本更新：新手必看的完整操作手册Calibre路径保护插件：告别拼音目录，拥抱原生中文路径5分钟快速上手：文泉驿微米黑字体跨平台安装完整指南终极歌词下载指南：3大平台免费获取，打造完美音乐体验PDown百度网盘下载器：2025年免费极速下载解决方案终极YimMenu游戏增强工具：从安装到精通完整指南

项目优选

收起
kernelkernel
deepin linux kernel
C
27
11
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
531
3.74 K
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
336
178
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
886
596
pytorchpytorch
Ascend Extension for PyTorch
Python
340
403
flutter_flutterflutter_flutter
暂无简介
Dart
772
191
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
agent-studioagent-studio
openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力
TSX
986
247
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
416
4.21 K
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
303
355