运营中心数据权限：CSS式三级分类精控实践

　　运营中心数据权限：CSS式三级分类精控实践——这名字是我一个月之前在钉钉群@所有人发的PR标题，当时前端组正为「权限颗粒度太粗导致财务部能看到采购部的合同金额」吵到凌晨两点。

　　我用的是CSS custom property + :is() + data- 属性组合方案，不是Role-Based Access Control（RBAC）那一套；把「运营中心」拆成「业务线-区域-岗位」三级，比如 data-perm-level1="ecom" data-perm-level2="shanghai" data-perm-level3="analyst"，然后在CSS里写 .card[data-perm-level1="ecom"][data-perm-level2="shanghai"] .budget-amount { display: none; } ——但实际跑起来发现 Chrome 116 不支持嵌套 :is(.a):is(.b) 的动态组合，这个坑我踩了整整三天，最后降级改用 :where() 包裹单层属性选择器，性能掉了8%，但至少能过了UAT。

　　上线第三天，风控组李雯反馈「华南大区总监能看到华北客户列表里的‘成交状态’字段」，查日志发现她账号带了两个区域标签：data-perm-level2="guangdong" 和 data-perm-level2="beijing"，而我的CSS选择器只匹配第一个——因为Element.dataset读取时只返回首次出现的值，这事儿MDN文档根本没写清楚，连React的useRef都救不了，最后硬是在Vite插件层加了postcss-data-perm插件，在构建时把多值展开成 data-perm-level2-guangdong、data-perm-level2-beijing 两组独立属性。

　　失败案例？有。上上周灰度时把「岗位」级控制错写成 [data-perm-level3~="manager"]，结果市场部实习生张锐（data-perm-level3="manager-intern"）被误判为高管，看到了未公开的GMV预测曲线图——那张图现在还躺在Sentry报警记录里，编号PERM-4492。

　　我测过七种方案：CSS-in-JS方案加载延迟高、服务端渲染SSR权限不一致、Shadow DOM隔离成本太大……最终选CSS方案是因为它真快——首屏样式生效仅需12.3ms（Lighthouse实测），比JS权限校验平均快417ms；而且运维同学可以直接在CMS后台改data属性，不用发版，昨天下午三点四十他们给华东区域临时开了三个字段，五分钟后就生效了。

文章配图，仅供参考

　　但我不敢说它通用。金融线那边试了两天就退回去了，说「监管审计要求所有权限操作必须留痕+可回溯」，而CSS方案在Console里敲 document.querySelector('.salary').style.display = 'block' 就能绕过，这事我没跟老板提，但心里清楚——这玩意儿只能活在中后台，别碰支付和风控。

　　下周一我要和后端对齐API返回的data-perm-字段规范，得让他们把level2值强制转成kebab-case，否则下次遇到 "North China" 带空格我就真得重写整个解析器了。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!