起因
最近接触了一下微前端技术，其一是提升自己阅历和技能，其二就是公司的三个相对独立的前端项目需要共用token。
这三个项目分别是用react和vue开发的，他们之间的关系大概如下，项目B和C是对A的补充。
我们一般在localStorage或者sessionStorage中存储token，而这个项目最初并没考虑B和C的token情况，并且起的服务占据了各自不同的端口。无疑需要对三个项目进行改造，目前来说项目改造主要以下两点：
- 三个项目展现在同一个域下，达到共享token的目的
- B和C 在token失效时候能够跳回登录
改造
共享域
三个不同域的前端项目怎么在同一个域中展示呢？熟悉nginx的应该知道这很容易实现。通过nginx强大的代理能力可以将三个项目代理到自己的路由下面。注意，这里的路由是后端的路由。配置大概如图
图中的ip地址替换成为自己项目的地址即可。如果在A中使用history.push('/B'),则会404或者走路由守卫去notfound页面，因为这边使用的是前端的路由跳转，前端路由中不具备/B/这个路由。项目A中需要执行 location='/B'，重写浏览器地址栏走后端路由然后代理过来项目B的代码。虽然看上去别扭但是总算能实现。
跳转登录
有了前面nginx实现共享，那么这边只需要监听接口返回对应状态即可,重写一下axios拦截器
if (error && error.response && error.response.status === 401) {
localStorage.clear()
location ='/A/login'
}
感受
这么也算是实现了公司的要求，可是我总觉的怪怪的，我能不能通过前端路由来切换项目呢？如果有一个页面，通过tabs来切换显示不同项目会要怎么做呢？这都是不能通过配置nginx来实现的，于是带着疑惑看到了微前端这个东西。
qiankun
这是我搜索出来算是最稳的微前端框架了吧。低版本umi建议升级到最新版本，有插件直接使用，不然写它的生命周期实在难受。这个框架的原理就是通过fetch请求对应服务下面的代码并执行，所以其他服务需要设置允许跨域，其实挺复杂的。我这也不是专门解释qiankun这个框架的，具体使用网上很多。
思考
如果一个公司的业务基本相同，开发了很多相同复制粘贴的页面，这个时候其实也挺适合使用微前端的。对业务进行细分类，然后起对应服务，然后通过微前端去拉取不同服务进行组合组成一个新的项目。大概如图：
作者简介： 张栓，人和未来大数据前端工程师，专注于html/css/js的学习与开发。
