后台权限系统完全解析：架构设计与Vue3React双框架实现全流程

权限系统是企业级后台开发的核心模块，本文将从架构设计到具体实现，为您详细解析Vue3/React双框架下的完整解决方案。

吃透后台权限系统：从架构设计到 Vue3/React 双框架完整落地

前言

作为企业级中后台系统的基础设施，权限管理是前端工程化进阶的必备知识点。当前主流教程普遍存在两个痛点：仅关注API调用而缺乏架构思维，以及Vue/React方案割裂难以复用。本文将提供一套通用架构设计，同时给出双框架生产级实现方案。

从工程化角度看，权限系统本质与UI框架无关。无论是Vue3还是React，其数据模型、鉴权逻辑和执行链路都是完全一致的。

本文基于企业级项目标准，拆解通用权限架构，同时提供Vue3+React双框架实现方案，统一路由/菜单/页面/按钮四级权限控制，适配前端静态和后端动态两种模式，帮助开发者构建标准化、可复用的权限体系。

一、权限架构整体设计（全框架通用）

1.1 设计原则

权限架构围绕三大核心原则构建，适用于各类规模的中后台项目：

1. 解耦性：权限核心逻辑与UI层解耦，鉴权规则、数据存储、状态管理统一抽象；

2. 分层性：覆盖路由、菜单、页面、按钮四层粒度，实现全方位访问控制；

3. 双模式：同时支持前端静态路由和后端动态路由，可灵活切换。

1.2 两种权限运行模式

1）前端权限模式（frontend）

路由静态定义在前端，登录后根据用户角色和权限码过滤路由表。该模式开发简单、部署便捷，适用于权限规则固定的中小型项目。

2）后端权限模式（backend）

基础路由由前端维护，业务路由存放在后端数据库。登录后动态拉取专属路由树并自动注册。该模式权限可动态配置、无需重启服务，适用于SaaS、多租户等复杂大型项目。

1.3 双维度鉴权模型

采用行业标准生产级方案：角色码+权限码双池分离，粗细粒度互补，职责完全隔离：

鉴权维度	数据来源	存储仓库	匹配规则	使用场景
角色码	用户信息接口	用户仓库	精确匹配	粗粒度身份管控（管理员/租户）
权限码	权限列表接口	权限仓库	前缀匹配	细粒度操作管控（按钮/接口）

补充说明：系统内置超级管理员标识*:*:*，持有该角色将自动放行所有鉴权校验。

1.4 四层权限覆盖

1. 路由级：基于路由meta.authority过滤非法访问路由；

2. 菜单级：同步路由过滤逻辑，无权限路由不渲染侧边菜单；

3. 页面级：通过Hook判断权限，控制页面模块显隐；

4. 按钮级：支持组件/指令/函数三种写法，管控操作类按钮。

1.5 统一数据存储结构

采用双仓库分离存储，Vue基于Pinia、React基于Zustand，数据结构完全对齐：

用户仓库（UserStore）

interface UserState {
  userInfo: BasicUserInfo | null;
  userRoles: string[]; // 用户角色码集合
}

权限仓库（AccessStore）

interface AccessState {
  accessCodes: string[];     // 权限码集合
  accessMenus: MenuRecordRaw[];
  accessRoutes: RouteRecordRaw[];
  accessToken: string | null;
  isAccessChecked: boolean;  // 权限初始化状态
}

1.6 权限完整执行链路

用户登录=>持久化Token=>路由守卫初始化=>获取用户角色和权限码=>写入全局Store=>根据权限模式生成可访问路由=>渲染菜单与页面=>组件层细粒度鉴权。

二、通用强制规范

2.1 权限码命名

采用三段式标准命名：模块:资源:操作，确保命名规范统一。

2.2 路由豁免

登录页、404等公共页面，配置meta.ignoreAccess: true豁免权限，与authority互斥：

{ path: "/login", meta: { ignoreAccess: true } }

2.3 权限模式切换

updatePreferences({ app: { accessMode: "frontend" | "backend" } });

三、Vue3 生产级落地

3.1 目录结构

3.2 路由权限配置

{
  path: "/permission",
  meta: { authority: ["sys:platform_admin", "sys:tenant_manager"] },
  children: [{
    path: "codes",
    meta: { authority: ["sys:platform_admin"] }
  }]
}

3.3 按钮鉴权三种方案

1）权限组件

新增

2）权限指令（推荐）

新增

3）编程式Hook

const { hasAccess, hasAccessByCodes } = useAccess();
const canCreate = hasAccess(['sys:user:create']);

3.4 Pro组件适配

内置Pro工具栏/单元格组件原生支持auth权限字段：

toolbar: [{ name: "add", text: "新增", auth: "sys:user:create" }]

四、React 生产级落地

4.1 目录结构

4.2 路由权限配置

配置规则与Vue完全一致：

{
  path: "permission",
  meta: { authority: ["sys:platform_admin"] }
}

4.3 按钮鉴权三种方案

1）Hook + 条件渲染（推荐）

const { hasAccessByCodes } = useAccess();
{hasAccessByCodes(['sys:user:create']) && <Button>新增Button>}

2）AccessControl 组件

<AccessControl codes={['sys:user:delete']} fallback=<span>无权限span>><Button>删除Button>AccessControl>

3）静态函数（非组件）

import { getAccessStatic } from '@/core/access';
if(getAccessStatic().hasAccessByCodes(['sys:user:create'])){}

五、工程化最佳实践

1. 路由：业务路由配置authority，公共页面统一开启ignoreAccess；

2. 按钮：权限标识严格遵循三段式命名，禁止业务内硬编码权限；

3. 与逻辑：内置API默认或逻辑，多权限同时校验需手动叠加判断；

4. 安全：前端仅管控UI展示，所有接口必须后端二次鉴权。

六、常见问题FAQ

1. 权限调试：直接打印UserStore、AccessStore，查看userRoles与accessCodes；

2. 权限刷新：调用useAuth().getUserPermissionCodes()重新拉取权限；

3. 刷新丢失：权限不做持久化属于安全设计，路由守卫自动重新初始化；

4. 安全边界：前端权限无法替代后端，仅用于优化用户交互。

七、写在最后

本文系统讲解了权限系统的架构设计与实现方案，通过Vue3/React双框架的完整落地示例，展示了企业级权限管理的核心要点与实践经验。掌握这些工程化架构思维，将帮助开发者在各类项目中构建高效、安全的权限体系。