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

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[];
}

登录成功后，前端请求：

RBAC on Saiga

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

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

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

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

3.1 菜单数据从后端来