关于微前端:微前端落地系列复盘

前沿：哈喽大家好，我是树酱🌲，好久不见。本文次要为了做复盘，在去年基于 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 指令咱们是如何给每个子利用复用，通过门户主利用去注入到子利用生命周期, 子利用接管如下👇

啊敏同学：树酱，你下面提及的按钮权限管制是基于<template>, 那如果是间接 render 函数渲染咋搞？

🌲：render 函数中原理也是一样的，只不过把指令换了一种形式，通过工具库外面封装 findPermission 函数，来管制 style 的 display 属性值，当然你也能够用上文提到主利用给子利用的形式注入一个工具函数的形式，以此达到复用。如下所示👇

2. 利用的异样监控

当门户落地后，如何去监控子利用的异样信息就显得很重要，毕竟不同环境可能会呈现不一样的状况，那如何去追踪和定位呢？

咱们在 qiankun 的 api 文档中找到了 addGlobalUncaughtErrorHandler 办法，用来监听全局的未捕捉异样

比如说我要监听利用加载失败，那我能够捕捉到的错误信息中的信息提醒来做正则匹配

而后通过 bus 通信，告诉页面显示利用加载失败页面，如下所示

👨‍🎓 啊豪同学：那你们怎么将异样信息上报的呢？

🌲：咱们是通过 sentry 去做异样信息上报的，sentry 自身会做异样捕捉，然而为了让主利用可能对立捕捉子利用的异样信息，做对立异样信息保护治理，所以在 addGlobalUncaughtErrorHandler 中做了被动上报

3. 如何让新的子利用实现疾速集成

前言：咱们晓得 qiankun 架构中一个子利用要集成到主利用中，是须要创立生命周期函数，比方 mounted 等以及批改打包形式。那如何疾速让新的子利用实现疾速集成呢？

咱们是通过打造一个简易版的脚手架工具，把波及相干的性能用一套模版保护起来，而后通过保护好的这个模版，而后通过脚手架创立新我的项目，实质上就是拉取这个模版，如下图所示

### 4. 如何动静注册利用？

前沿：为了让主利用能够去拜访不同的子利用，咱们须要在配置文件中定义好每个子利用的入口 entry 以及拜访名称，以此来注册子利用，咱们个别会不同的环境有不同的配置，比方下图所示

👨‍🎓 啊斌同学：那这样的话，每次批改子利用的 entry 或者新增新的子利用都得从新编译门户这个主利用

🌲：是的，本地配置化是会存在这样的问题，咱们能够搭建一个配置核心来保护，而后通过接口调用的形式来获取不同环境的，像上面这样👇

### 5. 部署中遇到的问题

前沿：部署微前端体系门户波及到公有云部署，私有云部署，还有基于容器化部署等等。过程中遇到一些问题

5.1 主利用加载子利用动态资源跨域咋搞？

实质上是因主利用是通过 fetch 去获取子利用的动态资源的，而后通过正则去解析进去子利用的动态资源信息，而后 fetch 下来，所以必须要求这些动态资源反对跨域，如何配置如下图所示，通过设置容许源了

Access-Control-Allow-Origin：跨域在服务端是不容许的。只能通过给 Nginx 配置 Access-Control-Allow-Origin * 后，能力使服务器能承受所有的申请源（Origin）

5.2 主利用加载子利用的动态资源不是最新，导致加载失败？

实质上就是子利用更新了代码，而主利用在 fetch 子利用资源的时候，加载到缓存的资源，导致加载资源失败，那么怎么解决呢？咱们能够在子利用的 nginx 中，设置cache-control，在每次申请资源的时候都查看是否更新。

5.3 如何让每个子利用都领有通用的 ngixn 配置？

为了解决以上问题，又要保障通用性，能够针对每个子利用都是同样的 nginx 配置，这时候能够通过在 dockerfile 中定义，在打包到容器时，把 nginx.conf 也打到容器中

5.4 如何正确部署主利用和子利用？

次要是两种计划：

• 1. 主利用和子利用部署到同一个服务器

这种状况适宜公司服务器数量较少，外围就是把主利用部署在一级目录，其余子利用放在二级目录

• 2. 主利用和子利用别离部署在不同服务器

这种状况又分为两种，一种是所有子利用都在一台服务器，一种是不同子利用在不同服务器，独立运行。

最初，以上两种形式都有好有坏，具体看你搭建的零碎是外部以 ip 拜访为主还是内部拜访域名为主，去依据理论状况利用。如果是外部零碎建设，子利用以外部拜访 ip 为主，子利用都在独立服务器，无需在配置过多域名，那能够间接用计划 2，那如果是对外且域名无限，那计划 1 或者更适合。

具体的配置形式，我看 qiankun 官网文档曾经更新，可查阅🔗文档 这里就不反复介绍

你好，我是🌲 树酱，请你喝杯🍵 记得三连哦～

1. 浏览完记得点个赞哦，有👍 有能源

2. 关注公众号前端那些趣事，陪你聊聊前端的趣事

3. 文章收录在 Github frontendThings 感激 Star✨