04. DOM 级权限控制

Ming 尝试了一种全新的权限控制机制，核心特点包括：

• 基座应用集中化管理所有子应用的权限数据；
• 基于 MutationObserver 实现的高性能 DOM 监控；

技术背景

当前大多数后台管理应用的权限控制机制，是将当前用户的权限数据挂载在 window 下的一个全局变量上，子应用自行编写逻辑，读取 window 上的全局权限数据，确定组件是否应该显示/disable 等。

这种权限控制机制存在以下问题：

1. 权限管理分散，即使是一个简单的按钮是否显示，都依赖于子应用编写逻辑，对于微前端分散式地编写子应用不够方便；

2. window 变量在 qiankun 开启 Javascript Sandbox 后，无法全局共享；

3. 前端权限数据不安全，可以被用户读取和修改。

集中式路由权限控制

由于权限和路由天然的相关性，Ming 尝试将权限数据和路由数据聚合在一起，在基座应用的 config.[env].ts 中，可以实现以下两种权限控制：

页面级权限控制

控制某个子应用下的某个路由（页面）的权限。例如：

{
  path: '/car/overproof',
  title: '超标车辆',
  privilegeId: '查看超标车辆',
},

当某个用户不具备 '查看超标车辆' 这个权限时，超标车辆页面 直接访问将会显示对应的 403 错误页面，左侧菜单栏也不会显示此子菜单项。

DOM 级权限控制

控制页面上特定 id 的 DOM 的权限。例如：

{
  sidebar: false,
  title: '异步按钮',
  privilegeId: '查看异步渲染的按钮',
},

当某个用户不具备 '查看异步渲染的按钮' 这个权限时，全部车辆页面 中异步渲染的按钮在尚未挂上 ID 时可以显示，挂上 ID 后将移除 DOM，彻底消失。

关于权限路由的配置，详见 基座声明式路由。

基于 MutationObserver 的高性能 DOM 权限控制

DOM 级权限控制基于 MutationObserver 实现，优势如下

1. 终端用户无法通过 Chrome Dev Tools 修改网页绕过权限控制；
2. 权限数据可以不保存在 localStorage，实现全部权限数据的保密；
3. 通过给 DOM 指定 id，让一个 DOM 元素的显示与否受权限控制；
4. 基座应用通过暴露 privileges 给子应用，子应用可以自行编写代码实现逻辑级别的权限控制，保证灵活性。