权限路由实践经验

做中后台系统开发时, 一个常见的痛点是权限路由的管理问题.
不同角色的导航栏不同, 能够看到的页面不同, 首页不同. 未经优化前的做法是

1. 开发所有角色需要的页面
2. 声明并引入所有的路由.
3. 为每个角色开发对应的导航栏(一级/二级/多级导航).
4. 为每个导航栏寻找合适的icon图标.
5. 在路由守卫处做拦截, 如果没有权限,则给出提示.

这里的痛点在于:

1. 用户角色特别多, 而且存在交并补等情况(例如角色A和B都能看到该页面), 因此存在大量的分枝判断.
2. 需求变更开销大. 一旦需要的调整导航栏/角色权限, 要跟着修改的地方过多.
3. 导入所有的路由, 有性能损失. 按理说, 不属于用户的路由,完全可以不导入.

经过一段时间的探索, 目前通过前后端和脚手架配合, 实现了这样一套流程:

1. 前端在特定文件夹下定义页面. 例如 \src\views\admin\person\index.vue

2. 脚手架自动完成组件导出. 例如 admin_person: () => import('./admin/person/index.vue')

3. 后端根据文件的树状结构,自动生成路由树,发送给前端.

   
   自动生成路由树,可以可视化赋权

4. 前端自动生成导航栏

   
   自动生成导航栏

5. 能够通过后台直接设置可见组/icon/导航栏名称

经过这种自动化处理之后, 原先耦合过多的开发步骤, 变得简单明了. 开发者只用在相应文件夹内新建页面, 剩下的工作完全自动化, 而且易于需求变更.