前沿:哈喽大家好,我是树酱🌲,好久不见。本文主要为了做复盘,在去年基于qiankun微前端架构的门户建设中,遇到的一些问题,可能你会认为:“哇,这也算问题吗?太简单了吧”。主要是分享在我认知体系内是如何解决的,如果对其中一些解决方案有更好的建议,记得在评论区留言~
上图为落地过程中遇到的一些问题,接下来围绕这些问题跟大家分享我的认知体系是如何去解决的
1. 应用权限控制如何做?
权限控制一般分为:路由权限、按钮权限(视觉权限)等,下面举例说明
- 路由权限:比如当用户从门户中登陆后,要访问应用A或者应用A下的某个菜单页面时,但该用户并没有该应用的访问权限,我们需要拦截它,不让它进入
- 按钮权限 (视图权限):比如当某个用户不存在对某种资源进行删除的权限的时候,我们会将原有的删除操作按钮给隐藏,以此来实现按钮
👦 啊敏同学:那我们怎么知道是否有权限,或者说怎么区分资源类型?
🌲:mark,首先我们先给每个资源定义一个code编码,你可以理解为对这个资源的唯一标记,它的身份id,比如我们可能是应用、菜单或者按钮。针对不同类型的资源,可以做用规则区分,比如👇
1.1 路由权限
👦 啊乐同学:那编码规则确定了,我们如何控制呢?
🌲:我们来假设一个用户有一个资源集合的权限
[appliction:monitor、menu:monitor:flume、button:monitor:flume:delete]
首先先说路由权限控制,主要是为了判断该用户是否有应用或者菜单的访问权限,我们一般可以在router.beforeEach
导航守卫中做拦截,一般分为两种情况
- 动态路由:原先并未添加路由,根据上文提到的资源编码来动态添加路由,可参考🌲树酱之前写的关于门户的前端权限控制
- 静态路由:已经初始化好路由,通过统一在门户这个主应用的路由根据获取的资源编码来判断当前访问的用户是否有应用访问权限,如果没有则进行拦截,如下所示是门户这个主应用对路由的处理,因为当子应用加载后,主应用会劫持原本子应用的路由,举个例子如下 👇
上图中的hasPerssion
方法就是通过判断该用户是否有某个应用的资源编码,以此来判断是否有权限访问,本质上就是new RegExp
正则匹配,如果没有权限则跳转到无权限访问页面
1.2 视觉权限
啊敏同学:那按钮权限呢?如何处理
🌲:同样需要依赖到资源编码,然后通过自定义指令,比如v-perms
来控制,指令源码可点击👉指令控制 如下图所示是一个按钮的具体使用
至于v-perms
指令我们是如何给每个子应用复用,通过门户主应用去注入到子应用生命周期, 子应用接收如下👇
啊敏同学:树酱,你上面提及的按钮权限控制是基于