Vue Vben Admin权限管理系统深度剖析
项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin Vue Vben Admin 提供了一套完整的动态路由权限生成机制和细粒度访问控制解决方案，支持前端控制、后端控制和混合模式三种权限管理方式。该系统通过智能的路由过滤、菜单生成和权限验证，实现了从路由级别到组件级别的全方位权限控制，为现代企业级应用提供了安全可靠的权限管理能力。
动态路由权限生成机制解析
Vue Vben Admin 提供了一套完整的动态路由权限生成机制，支持前端控制、后端控制和混合模式三种权限管理方式。这套机制通过智能的路由过滤、菜单生成和权限验证，实现了细粒度的访问控制。
权限生成核心流程
Vue Vben Admin 的动态路由权限生成遵循以下核心流程：
三种权限管理模式
1. 前端控制模式 (Frontend)
在前端控制模式下，所有路由配置都在前端代码中定义，系统根据用户角色对路由表进行过滤：
// 前端路由过滤逻辑
function generateRoutesByFrontend(
routes: RouteRecordRaw[],
roles: string[],
forbiddenComponent?: RouteRecordRaw['component'],
): Promise<RouteRecordRaw[]> {
// 根据角色标识过滤路由表
const finalRoutes = filterTree(routes, (route) => {
return hasAuthority(route, roles);
});
// 处理无权限访问的页面
if (forbiddenComponent) {
return mapTree(finalRoutes, (route) => {
if (menuHasVisibleWithForbidden(route)) {
route.component = forbiddenComponent;
}
return route;
});
}
return finalRoutes;
}
权限验证逻辑：
function hasAuthority(route: RouteRecordRaw, access: string[]) {
const authority = route.meta?.authority;
if (!authority) return true;
const canAccess = access.some((value) => authority.includes(value));
return canAccess || (!canAccess && menuHasVisibleWithForbidden(route));
}
2. 后端控制模式 (Backend)
后端模式下，路由配置完全由后端接口返回，前端负责将后端数据转换为Vue Router可识别的路由结构：
async function generateRoutesByBackend(
options: GenerateMenuAndRoutesOptions,
): Promise<RouteRecordRaw[]> {
const { fetchMenuListAsync, layoutMap = {}, pageMap = {} } = options;
try {
const menuRoutes = await fetchMenuListAsync?.();
if (!menuRoutes) return [];
const normalizePageMap: ComponentRecordType = {};
for (const [key, value] of Object.entries(pageMap)) {
normalizePageMap[normalizeViewPath(key)] = value;
}
return convertRoutes(menuRoutes, layoutMap, normalizePageMap);
} catch (error) {
console.error(error);
throw error;
}
}
后端返回的数据结构示例：
{
"path": "/system",
"name": "System",
"component": "Layout",
"meta": {
"title": "系统管理",
"icon": "ion:settings-outline",
"authority": ["admin", "super-admin"]
},
"children": [
{
"path": "/system/user",
"name": "SystemUser",
"component": "views/system/user/list.vue",
"meta": {
"title": "用户管理",
"authority": ["admin"]
}
}
]
}
3. 混合模式 (Mixed)
混合模式结合了前端和后端的优势，同时处理静态路由配置和动态后端菜单：
case 'mixed': {
const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
generateRoutesByBackend(options),
]);
resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
break;
}
路由守卫与权限验证
Vue Vben Admin 使用 Vue Router 的导航守卫来实现权限拦截：
function setupAccessGuard(router: Router) {
router.beforeEach(async (to, from) => {
const accessStore = useAccessStore();
const userStore = useUserStore();
// 基本路由跳过权限检查
if (coreRouteNames.includes(to.name as string)) {
return true;
}
// Token 检查
if (!accessStore.accessToken) {
if (to.meta.ignoreAccess) return true;
return { path: LOGIN_PATH, query: { redirect: to.fullPath } };
}
// 动态路由生成
if (!accessStore.isAccessChecked) {
const userInfo = userStore.userInfo || await authStore.fetchUserInfo();
const userRoles = userInfo.roles ?? [];
const { accessibleMenus, accessibleRoutes } = await generateAccess({
roles: userRoles,
router,
routes: accessRoutes,
});
accessStore.setAccessMenus(accessibleMenus);
accessStore.setAccessRoutes(accessibleRoutes);
accessStore.setIsAccessChecked(true);
return { path: to.fullPath, replace: true };
}
return true;
});
}
菜单生成机制
系统根据生成的路由自动创建对应的菜单结构：
function generateMenus(routes: RouteRecordRaw[], router: Router): MenuRecordRaw[] {
const finalRoutesMap = Object.fromEntries(
router.getRoutes().map(({ name, path }) => [name, path]),
);
let menus = mapTree<ExRouteRecordRaw, MenuRecordRaw>(routes, (route) => {
const path = finalRoutesMap[route.name as string] ?? route.path ?? '';
const { meta = {}, name: routeName, redirect, children = [] } = route;
return {
icon: meta.icon,
name: meta.title || routeName || '',
path: meta.hideChildrenInMenu ? redirect || path : meta.link || path,
show: !meta.hideInMenu,
children: meta.hideChildrenInMenu ? [] : children,
};
});
return filterTree(menus, (menu) => !!menu.show);
}
权限配置示例
在前端路由配置中定义权限：
const routes: RouteRecordRaw[] = [
{
path: '/system',
name: 'System',
meta: {
title: '系统管理',
icon: 'ion:settings-outline',
authority: ['admin', 'super-admin'] // 需要的权限角色
},
children: [
{
path: '/system/user',
name: 'SystemUser',
meta: {
title: '用户管理',
authority: ['super-admin'], // 需要超级管理员权限
menuVisibleWithForbidden: true // 无权限时显示但跳转403
},
component: () => import('@/views/system/user/list.vue')
}
]
}
];
性能优化策略
Vue Vben Admin 在权限生成过程中采用了多项性能优化措施：
- 路由懒加载：所有页面组件都使用动态导入
- 缓存机制：权限状态和路由信息在Pinia中缓存
- 批量处理：使用 Promise.all 并行处理多个异步操作
- 树结构优化：使用高效的树遍历算法处理路由和菜单结构
这套动态路由权限生成机制为Vue Vben Admin提供了灵活、高效且安全的权限管理能力，能够满足各种复杂的企业级应用场景需求。
基于Access Control的细粒度权限管理
Vue Vben Admin 的权限管理系统采用了先进的细粒度访问控制机制，通过角色和权限码的双重验证体系，为现代企业级应用提供了安全可靠的权限管理解决方案。该系统支持前端模式、后端模式和混合模式三种权限控制策略，能够满足不同业务场景下的权限管理需求。
权限控制核心架构
Vue Vben Admin 的权限管理系统构建在以下几个核心组件之上：
权限验证机制
系统提供了两种主要的权限验证方式：
1. 基于角色的权限验证
function hasAccessByRoles(roles: string[]) {
const userRoleSet = new Set(userStore.userRoles);
const intersection = roles.filter((item) => userRoleSet.has(item));
return intersection.length > 0;
}
2. 基于权限码的权限验证
function hasAccessByCodes(codes: string[]) {
const userCodesSet = new Set(accessStore.accessCodes);
const intersection = codes.filter((item) => userCodesSet.has(item));
return intersection.length > 0;
}
权限控制模式
Vue Vben Admin 支持三种权限控制模式，可以根据项目需求灵活选择：
| 模式类型 | 描述 | 适用场景 |
|---|---|---|
| 前端模式 | 权限验证在前端完成，基于预定义的权限配置 | 中小型项目，权限规则相对固定 |
| 后端模式 | 权限数据从后端动态获取，实时性更高 | 大型企业应用，权限频繁变更 |
| 混合模式 | 前后端权限验证结合，兼顾灵活性和性能 | 复杂业务场景，需要动态和静态权限结合 |
权限指令系统
系统提供了强大的 v-access 指令，支持细粒度的组件级权限控制：
<template>
<!-- 基于角色的权限控制 -->
<button v-access:role="'admin'">管理员按钮</button>
<button v-access:role="['admin', 'editor']">多角色按钮</button>
<!-- 基于权限码的权限控制 -->
<button v-access:code="'user:create'">创建用户</button>
<button v-access:code="['user:read', 'user:write']">读写权限</button>
</template>
指令的实现原理如下：
function isAccessible(el: Element, binding: DirectiveBinding<string | string[]>) {
const { accessMode, hasAccessByCodes, hasAccessByRoles } = useAccess();
const value = binding.value;
if (!value) return;
const authMethod = accessMode.value === 'frontend' && binding.arg === 'role'
? hasAccessByRoles
: hasAccessByCodes;
const values = Array.isArray(value) ? value : [value];
if (!authMethod(values)) {
el?.remove();
}
}
动态路由生成机制
系统能够根据用户权限动态生成可访问的路由和菜单：
权限数据持久化
权限相关的关键数据通过 Pinia 进行状态管理，并支持选择性持久化：
persist: {
pick: [
'accessToken',
'refreshToken',
'accessCodes',
'isLockScreen',
'lockScreenPassword',
],
}
这种设计确保了用户在刷新页面后仍能保持登录状态和权限信息，同时敏感信息得到安全存储。
实际应用示例
以下是一个完整的权限控制组件示例：
<template>
<div>
<!-- 管理员专属功能 -->
<div v-access:role="'admin'">
<h3>系统管理</h3>
<button @click="handleSystemConfig">系统配置</button>
<button @click="handleUserManagement">用户管理</button>
</div>
<!-- 编辑人员功能 -->
<div v-access:role="['admin', 'editor']">
<h3>内容管理</h3>
<button v-access:code="'content:create'">创建内容</button>
<button v-access:code="'content:edit'">编辑内容</button>
<button v-access:code="'content:delete'">删除内容</button>
</div>
<!-- 动态权限切换 -->
<div>
<button @click="toggleAccessMode">
切换权限模式: {{ accessMode }}
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { useAccess } from '@vben/effects/access';
const { accessMode, toggleAccessMode } = useAccess();
const handleSystemConfig = () => {
// 系统配置逻辑
};
const handleUserManagement = () => {
// 用户管理逻辑
};
</script>
权限验证最佳实践
- 最小权限原则：只为用户分配完成工作所必需的最小权限
- 分层验证：结合路由级、组件级和功能级的多层次权限验证
- 前后端协同：前端进行用户体验优化，后端进行最终权限验证
- 审计日志：记录重要的权限操作和变更历史
- 定期审查：定期检查和清理不再需要的权限分配
Vue Vben Admin 的细粒度权限管理系统通过上述机制，为企业级应用提供了强大而灵活的权限控制能力，既保证了安全性，又提供了良好的开发体验和用户体验。系统的模块化设计使得权限规则的调整和维护变得简单高效，能够适应各种复杂的业务场景需求。
权限指令与组件级权限控制
Vue Vben Admin 提供了一套完整的组件级权限控制解决方案，通过自定义指令、组件封装和组合式API三种方式，实现了细粒度的前端权限控制。这种设计让开发者能够根据业务需求灵活选择最适合的权限控制方式。
权限控制的核心架构
Vue Vben Admin 的权限控制系统采用分层设计，核心架构如下：
自定义权限指令 v-access
Vue Vben Admin 提供了强大的 v-access 自定义指令，支持两种权限验证模式：
指令语法格式
<!-- 权限码模式 -->
<button v-access:code="['AC_100100']">需要AC_100100权限的按钮</button>
<!-- 角色模式 -->
<button v-access:role="['admin']">需要admin角色的按钮</button>
<!-- 支持多个权限码或角色 -->
<button v-access:code="['AC_100100', 'AC_100030']">
需要AC_100100或AC_100030权限
</button>
指令实现原理
权限指令的核心实现在 directive.ts 文件中：
function isAccessible(
el: Element,
binding: DirectiveBinding<string | string[]>,
) {
const { accessMode, hasAccessByCodes, hasAccessByRoles } = useAccess();
const value = binding.value;
if (!value) return;
const authMethod =
accessMode.value === 'frontend' && binding.arg === 'role'
? hasAccessByRoles
: hasAccessByCodes;
const values = Array.isArray(value) ? value : [value];
if (!authMethod(values)) {
el?.remove();
}
}
指令的工作流程如下：
- 参数解析：解析指令的参数（code/role）和值（权限码/角色数组）
- 模式判断：根据系统配置的权限模式选择验证方法
- 权限验证：调用对应的验证函数进行权限检查
- DOM操作：如果没有权限，直接从DOM中移除元素
AccessControl 组件封装
除了指令方式，Vue Vben Admin 还提供了 AccessControl 组件来实现更灵活的权限控制：
组件使用示例
<template>
<AccessControl :codes="['AC_100100']" type="code">
<button>需要AC_100100权限的按钮</button>
</AccessControl>
<AccessControl :codes="['admin']" type="role">
<button>需要admin角色的按钮</button>
</AccessControl>
</template>
<script setup>
import { AccessControl } from '@vben/access';
</script>
组件核心实现
AccessControl 组件的核心逻辑：
<script lang="ts" setup>
const props = withDefaults(defineProps<Props>(), {
codes: () => [],
type: 'role',
});
const { hasAccessByCodes, hasAccessByRoles } = useAccess();
const hasAuth = computed(() => {
const { codes, type } = props;
return type === 'role' ? hasAccessByRoles(codes) : hasAccessByCodes(codes);
});
</script>
<template>
<slot v-if="!codes"></slot>
<slot v-else-if="hasAuth"></slot>
</template>
useAccess 组合式函数
对于需要编程式权限控制的场景，可以使用 useAccess 组合式函数：
函数使用示例
<script setup>
import { useAccess } from '@vben/access';
const { hasAccessByCodes, hasAccessByRoles, accessMode } = useAccess();
// 条件渲染
const showAdminButton = computed(() => hasAccessByCodes(['AC_100100']));
// 条件逻辑
function handleSensitiveOperation() {
if (!hasAccessByRoles(['admin'])) {
alert('权限不足');
return;
}
// 执行敏感操作
}
</script>
权限验证函数实现
function hasAccessByRoles(roles: string[]) {
const userRoleSet = new Set(userStore.userRoles);
const intersection = roles.filter((item) => userRoleSet.has(item));
return intersection.length > 0;
}
function hasAccessByCodes(codes: string[]) {
const userCodesSet = new Set(accessStore.accessCodes);
const intersection = codes.filter((item) => userCodesSet.has(item));
return intersection.length > 0;
}
权限控制模式对比
Vue Vben Admin 支持多种权限控制模式，每种模式都有其适用场景：
| 控制方式 | 语法示例 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|---|
| 指令方式 | v-access:code="['AC_100100']" | 简单的元素级权限控制 | 简洁直观，声明式 | 无法处理复杂逻辑 |
| 组件方式 | <AccessControl :codes="['AC_100100']"> | 需要包裹多个元素的场景 | 支持插槽，灵活性高 | 增加DOM层级 |
| 函数方式 | hasAccessByCodes(['AC_100100']) | 复杂的编程逻辑控制 | 最大灵活性 | 需要手动处理渲染 |
权限验证流程详解
权限验证的核心流程可以通过以下序列图来理解：
最佳实践建议
-
统一权限标识：建议项目中使用统一的权限码命名规范，如
模块_功能_操作格式 -
权限粒度控制：根据业务需求合理划分权限粒度，避免过度细分或过于粗放
-
错误处理：对于无权限访问的情况，提供友好的用户提示
-
性能优化：对于频繁使用的权限验证，考虑使用缓存机制
-
测试覆盖：编写单元测试确保权限控制的正确性
实际应用示例
以下是一个完整的权限控制示例，展示了三种方式的综合使用：
<template>
<div>
<!-- 指令方式 -->
<button v-access:code="['USER_MANAGE_ADD']" @click="addUser">
添加用户
</button>
<!-- 组件方式 -->
<AccessControl :codes="['USER_MANAGE_EDIT']" type="code">
<button @click="editUser">编辑用户</button>
</AccessControl>
<!-- 函数方式 -->
<button v-if="canDeleteUser" @click="deleteUser">
删除用户
</button>
</div>
</template>
<script setup>
import { AccessControl, useAccess } from '@vben/access';
import { computed } from 'vue';
const { hasAccessByCodes } = useAccess();
const canDeleteUser = computed(() =>
hasAccessByCodes(['USER_MANAGE_DELETE'])
);
function addUser() {
// 添加用户逻辑
}
function editUser() {
// 编辑用户逻辑
}
function deleteUser() {
if (!hasAccessByCodes(['USER_MANAGE_DELETE'])) {
alert('没有删除权限');
return;
}
// 删除用户逻辑
}
</script>
通过这种多层次的权限控制方案，Vue Vben Admin 为开发者提供了灵活而强大的权限管理能力，能够满足各种复杂业务场景的需求。
前后端权限系统集成方案
Vue Vben Admin 提供了灵活的前后端权限集成方案，支持三种不同的权限控制模式：前端控制、后端控制和混合模式。这种设计使得系统能够适应不同的业务场景和安全需求。
权限控制模式架构
Vue Vben Admin 的权限系统采用分层架构设计，通过统一的接口对外提供服务：
三种权限模式详解
1. 前端控制模式 (Frontend Mode)
前端模式适用于权限规则相对固定且变化不频繁的场景。权限信息在前端代码中硬编码，通过角色标识进行路由过滤。
核心实现代码：
// 前端路由权限过滤逻辑
function generateRoutesByFrontend(
routes: RouteRecordRaw[],
roles: string[],
forbiddenComponent?: RouteRecordRaw['component'],
): Promise<RouteRecordRaw[]> {
// 根据角色标识过滤路由表
const finalRoutes = filterTree(routes, (route) => {
return hasAuthority(route, roles);
});
return finalRoutes;
}
function hasAuthority(route: RouteRecordRaw, access: string[]) {
const authority = route.meta?.authority;
if (!authority) return true;
const canAccess = access.some((value) => authority.includes(value));
return canAccess || (!canAccess && menuHasVisibleWithForbidden(route));
}
路由配置示例：
const routes = [
{
path: '/system',
name: 'System',
component: BasicLayout,
meta: {
title: '系统管理',
authority: ['admin', 'super_admin'], // 需要的角色
},
children: [
{
path: 'user',
name: 'SystemUser',
component: () => import('@/views/system/user.vue'),
meta: { title: '用户管理' }
}
]
}
];
2. 后端控制模式 (Backend Mode)
后端模式适用于权限动态变化、需要实时控制的场景。菜单和权限信息完全由后端API提供。
后端接口设计：
// 后端菜单API接口
export async function getAllMenusApi() {
return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
}
// 后端Mock数据示例
const MOCK_MENUS = [
{
username: 'admin',
menus: [
{
path: '/system',
name: 'System',
component: 'BasicLayout',
meta: { title: '系统管理' },
children: [
{
path: '/system/user',
name: 'SystemUser',
component: '@/views/system/user.vue',
meta: { title: '用户管理' }
}
]
}
]
}
];
后端路由生成流程：
3. 混合控制模式 (Mixed Mode)
混合模式结合了前端和后端的优势，既支持前端固定的基础路由，又支持后端动态的业务路由。
实现原理：
case 'mixed': {
const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
generateRoutesByBackend(options),
]);
resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
break;
}
权限数据流管理
Vue Vben Admin 使用 Pinia 进行权限状态管理，确保权限数据的一致性和响应式更新。
权限存储结构：
interface AccessState {
accessCodes: string[]; // 权限码列表
accessMenus: MenuRecordRaw[]; // 可访问菜单
accessRoutes: RouteRecordRaw[]; // 可访问路由
accessToken: string | null; // 访问令牌
isAccessChecked: boolean; // 是否已检查权限
// ... 其他状态
}
权限检查流程表：
| 步骤 | 动作 | 说明 |
|---|---|---|
| 1 | 路由守卫拦截 | 检查用户登录状态和权限 |
| 2 | Token验证 | 验证accessToken有效性 |
| 3 | 获取用户信息 | 获取用户角色和权限数据 |
| 4 | 生成动态路由 | 根据权限模式生成可访问路由 |
| 5 | 注册路由 | 动态添加到Vue Router |
| 6 | 生成菜单 | 根据路由生成侧边栏菜单 |
| 7 | 重定向 | 跳转到目标页面或首页 |
细粒度权限控制
除了路由级别的权限控制，Vue Vben Admin 还提供了组件级别的细粒度权限控制。
权限指令使用：
<template>
<!-- 角色权限控制 -->
<button v-access:role="'admin'">管理员按钮</button>
<!-- 权限码控制 -->
<button v-access:code="'user:create'">创建用户</button>
<!-- 多个权限控制 -->
<button v-access:code="['user:create', 'user:edit']">用户管理</button>
</template>
权限组件使用：
<template>
<AccessControl :codes="['user:delete']" type="code">
<button>删除用户</button>
</AccessControl>
<AccessControl :codes="['admin']" type="role">
<button>管理员功能</button>
</AccessControl>
</template>
权限模式切换机制
系统支持运行时动态切换权限模式，方便开发和测试。
// 权限模式切换函数
async function toggleAccessMode() {
updatePreferences({
app: {
accessMode: preferences.app.accessMode === 'frontend' ? 'backend' : 'frontend',
},
});
// 重新生成权限
await regeneratePermissions();
}
错误处理和降级方案
系统提供了完善的错误处理机制，确保在权限获取失败时仍能正常运作。
降级策略：
- API调用失败时使用前端默认权限
- 组件级别权限检查失败时隐藏或禁用组件
- 路由权限检查失败时跳转403页面
// 权限生成错误处理
try {
const { accessibleMenus, accessibleRoutes } = await generateAccess(options);
// 正常处理
} catch (error) {
console.error('权限生成失败:', error);
// 使用默认权限或跳转错误页面
if (preferences.app.fallbackToFrontend) {
await generateAccess({ ...options, mode: 'frontend' });
}
}
这种灵活的前后端权限集成方案使得 Vue Vben Admin 能够适应各种复杂的业务场景，从简单的静态权限到复杂的动态权限控制都能完美支持。
总结
Vue Vben Admin 的权限管理系统通过灵活的前后端集成方案、多层次的权限控制机制和完善的错误处理策略，为企业级应用提供了强大而安全的权限管理解决方案。系统支持三种权限模式（前端、后端、混合），能够适应各种复杂的业务场景需求，从简单的静态权限到复杂的动态权限控制都能完美支持。通过路由守卫、权限指令、组件封装和组合式API等多种方式，实现了从路由级别到组件级别的细粒度权限控制，既保证了安全性，又提供了良好的开发体验和用户体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
