日常开发中经常会碰到后台管理系统类的项目。
此类项目都有一些通用性,最常见的莫过于权限管控了。
Role-Based Access Control:基于角色的访问控制
最常用的就是采用RBAC方案,即根据角色界定访问权限。
权限分类
权限可以分为页面权限与功能权限。其中页面权限本质上就前端路由了。在负责的项目中,开发了权限管控功能。主要实现两个功能:1)维护用户与角色的映射关系;2)角色与页面访问权限/页面特定功能权限之间的映射关系
此外,遇到过一些特殊情况,就是个别用户有需要访问一些特殊页面,因此使用了用户工号对应特殊页面+角色对应通用页面的形式来维护页面权限信息。
Webpack动态import
在维护角色页面权限的时候,设定了一个path字段,此字段为页面组件的路径。通常,会使用懒加载组件文件。此时,可以利用webpack的动态import功能来加载指定路径对应的组件。这样,我们就可以将角色与页面访问权限转化为角色与组件文件的映射关系。只要将映射关系存入数据库即可。
当登录的时候,后端返回用户对应的页面权限(文件路径)并生成系统菜单。当用户点击菜单的时候路由跳转,并解析异步组件。
路由元信息
VueRouter中具有meta信息,将角色对应的功能权限存入元信息中。然后在组件created或者路由守卫中读取元信息再显示/禁用对应的功能按钮。
清空路由
在VueRouter中,没有提供清空每部pathList,pathMap,nameMap的方法。在不破坏源码情况下,我们可以重置router实例的matcher属性。此属性包含了match方法与addRouters方法,也初始化了pathList,pathMap,nameMap的值。