欢迎关注我的公众号睿Talk，获取我最新的文章：一、前言在成熟的电商系统中，权限管理是不可或缺的一个环节。灵活的权限管理有助于管理员对不同的人员分配不同的权限，在满足业务需要的同时保证敏感数据只对有权限的人开放。笔者最近对系统的权限管理做了一次改造，在此分享一些经验以供参考。二、权限管理基础权限管理一版分以下 3 个基础概念：功能点角色用户它们之间的关系一句话就能说清楚：一个用户可以拥有多个角色，而一个角色可以包含多个功能。比如一个员工可以既有收银员的角色，也可以有库管员的角色。对于收银员这个角色，可以有开单收银、查看订单、查看会员信息等功能点。此外还有 2 个概念：功能权限数据权限它们之间的关系举例来说明：想象一个连锁店的场景，某个门店的管理员具有查看营收的功能权限，和查看自己门店数据的数据权限；高级管理员同样拥有查看营收的功能权限，和查看所有门店数据的数据权限。三、前端权限控制下面我们聚焦到前端领域，聊聊前端应该怎么做权限设计。前端本质上只有 2 种权限：页面权限和组件权限。为了更好理解，我将菜单权限从组件权限中拆出来，形成了以下 3 类的权限：每一个权限最终都会落到权限点上。权限点可以理解为一个编码，有这个权限点就说明有对应的功能权限。权限点的编码要注意 2 点：全局唯一尽量短小（减少带宽消耗，因为一个用户可能会有很多权限点）需要控制权限的地方，都要定义一个权限点，然后告诉后端。一个用户所有的权限点会以数组的形式返回。判断是否有权限就是从数组中匹配一个元素。下面以 React 为例，聊聊具体的实现方式。对于页面的权限判断，可以在 React Router 的 onEnter 回调中判断：// 编码映射，下面的 getUrlCodeByName 会用到export default { order_list: ‘zaq0’, // 订单列表 order_detail: ‘xsw1’, // 订单详情 order_refund_list: ‘cde2’, // 订单退款列表 order_refund_detail: ‘vfr3’, // 订单退款详情 order_deduct_modify: ‘bgt4’, // 订单修改业绩};function canAccessUrl(urlName) { const moduleCode = getUrlCodeByName(urlName); // 权限点一般是一个没意义的编码，为了更易于理解，前端做了一个编码映射 return accesses.u.indexOf(moduleCode) > -1; // accesses.u 数组是后端返回的所有 url 权限点}function routerOnEnterCheck(urlName) { return function routerOnEnter(nextState, replace) { if (!canAccessUrl(urlName)) { replace(’/unauthorized’); } };}…{ path: ’list’, getComponent: loadAsync(() => import(/* webpackChunkName: “order” / ‘../../order/List’)), onEnter: routerOnEnterCheck(‘order_list’),}…对于菜单和组件的权限判断，大体上长这样：// 用以缓存是否有权限访问组件const componentAccessCache = {};/* * 检查访问组件的权限 * 一个组件可能会重复 render 多次，而组件权限的数量可能会超多（上百个），因此将权限缓存起来以提高性能 */function canAccessComponent(module, componentName) { if (!module || !componentName) { console.error(canAccessComponent ${module} ${componentName} 缺参数); } const key = ${module}.${componentName}; let result = componentAccessCache[key]; if (result !== undefined) { return result; } const moduleCode = getComponentCodeByModuleAndName(module, componentName); // 权限点一般是一个没意义的编码，为了更易于理解，前端做了一个编码映射 result = accesses.c.indexOf(moduleCode) > -1; // accesses.c 数组是后端返回的所有组件权限点 componentAccessCache[key] = result; return result;}class SomeComponent extends PureComponent { … render() { return ( … { canAccessComponent(‘asset’, ‘buy_pay’) && <Button type=“primary” className=“btn-buy” onClick={() => (buy(num))} > 立即订购 </Button> } … ) }}权限点的获取笔者放在了 node 端，通过全局变量的形式注入到页面中，保证呈现的页面是由权限点过滤过的。此外接口返回对权限点是一个一维数组，为了加快前端检索速度，在 node 端根据编码规则将权限点分为 3 类（菜单/页面/组件），具体细节就不细说了。四、总结本文介绍了权限管理的基础知识，还结合 React 讲解了前端权限控制的一些细节。技术方案比较简单，真正麻烦的是每一个权限点的定义及录入，以及对现有系统的改造。改造过程中可以分模块进行迭代，毕竟罗马不是一天就能建成。