菜单、按钮、接口：一套权限系统怎么落地到前端

wuwenzen@outlook.com (wuwj) — Fri, 02 Apr 2021 00:00:00 +0000

中后台项目到了一定体量之后，绕不开一个问题：权限怎么做？

不同角色看到的菜单不一样；
同一个页面里，有人能点「导出」、有人只能看；
接口层还要做真正的权限校验。

这篇文章从实践角度，串一下我现在常用的一套设计：从「角色-权限-资源」模型，到前端路由、按钮显隐，再到接口鉴权。

1. 模型：角色、权限点、资源

先把概念讲清楚：

用户（User）：具体的人；
角色（Role）：一类权限集合，例如「运营」、「风控」、「管理员」；
权限点（Permission）：最小粒度的能力，比如「订单列表查看」「订单导出」；
资源（Resource）：被操作的对象，比如菜单、按钮、接口。

关系一般是：

User → 多个 Role → 多个 Permission → 作用在不同 Resource 上

前端最关心的其实只有一件事：

登录之后，我拿到的「权限点列表」是什么？

因为菜单、按钮显隐、前端路由保护，本质上都是围绕这串权限点做判断。

2. 权限点命名：模块 + 资源 + 动作

命名如果乱，后面就会非常难维护。实践中我会用统一格式：

<模块>:<资源>:<动作>

例如：

order:list:view —— 订单列表查看；
order:list:export —— 订单列表导出；
order:detail:update —— 订单详情修改；
user:manage:create —— 用户管理新增。

在数据库或配置里，用一个简单的结构描述：

interface Permission {
  code: string;      // order:list:view
  name: string;      // 订单列表-查看
  description?: string;
}

前端拿到的就是一串 code：

["order:list:view", "order:list:export", "order:detail:update"]

3. 菜单与路由：根据权限生成

3.1 菜单数据从后端来

让后端维护一份菜单树：

interface MenuItem {
  id: string;
  parentId?: string;
  title: string;
  path: string;
  icon?: string;
  // 访问该菜单需要的权限点（可以是单个或多个）
  permission?: string;
  children?: MenuItem[];
}

登录成功后，前端请求：

中后台「表格 + 查询」通用化设计实践

wuwenzen@outlook.com (wuwj) — Tue, 28 Apr 2020 00:00:00 +0000

中后台系统有一个经典页面模样：

上面一块查询条件，下面一张表格，再加一个分页条。

做过几套之后你会发现：字段变了、接口变了、样式改改，本质都差不多。与其每个项目都重写，不如抽象出一套可复用的「查询 + 表格」方案。

这篇文章记录我在中后台项目里总结的一套通用设计思路。

1. 标准「列表页」长什么样？

通常一个「标准列表页」包含：

查询区（Search Form）
- 输入框、下拉、日期区间、状态选择等
- 「查询」、「重置」按钮
操作区（Toolbar）
- 新增、批量操作、导出等
结果表格（Table）
- 列信息、操作列
- 勾选、多选
分页条（Pagination）
- 当前页、总数、页大小

可以抽象成一个数据结构：

interface ListPageConfig {
  searchItems: SearchItem[];
  columns: Column[];
  actions: ActionItem[]; // 顶部操作
  rowActions: ActionItem[]; // 行内操作
}

换句话说：绝大部分差异都可以通过配置表达出来。

2. 查询表单的配置化设计

先从搜索区开始。

2.1 基本配置格式

我习惯用一个数组描述查询项：

const searchItems = [
  {
    prop: 'keyword',
    label: '关键词',
    type: 'input',
    placeholder: '请输入订单号/姓名',
  },
  {
    prop: 'status',
    label: '状态',
    type: 'select',
    options: [
      { label: '全部', value: '' },
      { label: '待处理', value: 'PENDING' },
      { label: '已完成', value: 'DONE' },
    ],
  },
  {
    prop: 'dateRange',
    label: '创建日期',
    type: 'daterange',
  },
];

再写一个通用的 <SearchForm /> 组件去渲染它：

中后台架构 on Saiga