权限说明

本系统支持两种权限控制模式，基于用户角色或菜单列表动态管理页面访问和按钮显示权限。

权限控制模式

概述

系统提供以下两种权限控制模式：

• 基于角色：通过接口获取用户角色，控制页面访问和按钮显示权限。
• 基于菜单：通过接口获取菜单列表，依据菜单结构控制页面访问和按钮权限。

配置方式

权限控制模式通过根目录下的 .env 文件配置。修改 VITE_ACCESS_MODE 的值可切换模式：

• frontend：前端控制模式，基于后端返回的角色标识进行权限控制。
• backend：后端控制模式，基于后端返回的菜单列表进行权限控制。

# 权限控制模式（frontend | backend）
VITE_ACCESS_MODE=frontend

前端控制模式

原理

前端维护菜单列表。用户登录后，接口返回角色标识（如 R_SUPER）。前端根据角色遍历菜单列表，若菜单的 roles 字段包含该角色，则允许访问对应路由。若未设置 roles，则默认所有用户可访问。

配置示例

菜单配置文件位于：/src/router/routes/asyncRoutes.ts

[
  {
    id: 4,
    path: "/system",
    name: "System",
    component: RoutesAlias.Home,
    meta: {
      title: "menus.system.title",
      icon: "",
      keepAlive: false,
    },
    children: [
      // 仅 R_SUPER 和 R_ADMIN 角色可访问
      {
        id: 41,
        path: "user",
        name: "User",
        component: RoutesAlias.User,
        meta: {
          title: "menus.system.user",
          keepAlive: true,
          roles: ["R_SUPER", "R_ADMIN"],
        },
      },
      // 未设置 roles，所有用户可访问
      {
        id: 42,
        path: "role",
        name: "Role",
        component: RoutesAlias.Role,
        meta: {
          title: "menus.system.role",
          keepAlive: true,
        },
      },
    ],
  },
];

注意事项

• 确保接口返回的角色标识与路由表的 roles 字段匹配，否则用户无法访问受限页面。

后端控制模式

原理

后端生成菜单列表。用户登录后，接口返回菜单数据，前端校验后动态注册路由，实现权限控制。

数据结构

菜单数据结构定义位于：/src/router/routes/asyncRoutes.ts

[
  {
    id: 4,
    path: "/system",
    name: "System",
    component: RoutesAlias.Home,
    meta: {
      title: "menus.system.title",
      icon: "",
      keepAlive: false,
    },
    children: [
      {
        id: 41,
        path: "user",
        name: "User",
        component: RoutesAlias.User,
        meta: {
          title: "menus.system.user",
          keepAlive: true,
        },
      },
      {
        id: 42,
        path: "role",
        name: "Role",
        component: RoutesAlias.Role,
        meta: {
          title: "menus.system.role",
          keepAlive: true,
        },
      },
    ],
  },
];

注意事项

• 后端返回的菜单数据结构必须与前端定义一致，否则可能导致路由注册失败。

前后端控制模式对比

• 前端控制模式：

  • 适用于角色固定的系统。
  • 后端角色变更需同步更新前端路由配置。
  • 实现简单，适合小型项目。

• 后端控制模式：

  • 适用于权限复杂的系统。
  • 后端返回完整菜单列表，前端动态注册路由。
  • 更灵活，但需确保前后端数据结构一致。

按钮权限控制

按钮权限控制支持精细化管理，通过用户角色或接口返回的权限码动态控制按钮显示。

权限码

权限码适用于前端和后端控制模式：

• 前端控制模式：登录接口需返回权限码列表。
• 后端控制模式：菜单列表需包含 authList 字段，定义按钮权限。

配置示例（后端控制模式）

[
  {
    id: 44,
    path: "menu",
    name: "Menus",
    component: RoutesAlias.Menu,
    meta: {
      title: "menus.system.menu",
      keepAlive: true,
      authList: [
        { id: 441, title: "新增", auth_mark: "add" },
        { id: 442, title: "编辑", auth_mark: "edit" },
      ],
    },
  },
];

使用方式

通过系统提供的 hasAuth 方法控制按钮显示：

import { useAuth } from "@/composables/useAuth";
const { hasAuth } = useAuth();

<ElButton v-if="hasAuth('add')">添加</ElButton>

自定义指令（后端控制模式）

在后端控制模式下，可通过自定义指令 v-auth 基于 authList 的 auth_mark 控制按钮显示。

配置示例

[
  {
    id: 44,
    path: "menu",
    name: "Menus",
    component: RoutesAlias.Menu,
    meta: {
      title: "menus.system.menu",
      keepAlive: true,
      authList: [
        { id: 441, title: "新增", auth_mark: "add" },
        { id: 442, title: "编辑", auth_mark: "edit" },
        { id: 443, title: "删除", auth_mark: "delete" },
      ],
    },
  },
];

使用方式

<ElButton v-auth="'add'">添加</ElButton>

注意事项

• 确保登录接口返回的角色或权限码与路由表配置一致。
• 后端控制模式下，菜单数据需严格遵循前端定义的结构。
• 测试权限控制时，验证不同角色用户的页面和按钮显示是否符合预期。