qiankun 子系统开发体验优化cookie获取

问题描述

• 基于乾坤qiankun微前端方案开发的系统，分为主系统和子系统两部分，主系统包含系统管理、权限管理、子系统、注册登录、导航等模块。子系统主要是某个自成体系的功能模块。
• 本地开发主系统会调起登录，登录接口返回set-cookie（出于安全考虑会使用httponly模式），写入到cookie中，对整个domain共享，后续的请求会写携带上cookie，用于后端鉴权。
• 开发子系统的时候由于子系统不包含登录，所以接口请求就会返回未鉴权。
• 此前的做法是，手动复制目标环境（代理接口的domain）的cookie到当前domain(即localhost)的cookie中，实现鉴权。
  这样做当然没有问题，就是对于开发者看来说每次这样复制一遍很是 有辱斯文, 毕竟写代码的初衷就是为了用技术替代重复的劳动不是？

实践思路

chrome插件

因为壳系统耦合了蛮重的业务逻辑，所以是想尽量在不动壳系统代码的前提下解决问题。最近看了一点关于chrome开发的例子，想着用chrome插件完全解耦业务代码，想想就觉得很棒。

最初的想法很简单，通过脚本获取到目标源的cookie,然后写入到本地，完美？
事实上很快就被打脸了，接口通过responents setCookie的cookie，通过document.cookie()是获取不到的！emoj？

那么，如果我在chrome插件中实现页面嵌入iframe，iframe里面加载本地domain,然后用脚本更新目标地址的js，页面刷新之后，这个cookike是不是就写入到了本地domain了呢？我tm真是个人才！

再次被打脸，chrome的iframe也不是白给的，如果这么容易就被你盗用了其它网站的cookie，那岂不是cookie的安全策略成了摆设？

1. 问题一是我修改了js文件之后，控制台会报“<”错误，我想应该就是解析出错了吧；
2. 其次就是全局的路由和vue实例已经挂在全局了，这个过程应该是不可逆的吧？
3. 页面刷新也是问题，直接location.reload()触发更新，会重新加载本地文档（src地址：localhost），脚本加上去的内容会被清除掉。凉凉，看来这又是死胡同。

回到原点

看来cookie的安全策略是绕不开的一座山。

干不掉的对手，就想办法和它做朋友

从朋友那取了经，还是应该老老实实的把登录从壳系统里面抽离出来，最好抽成独立的模块，生产npm包，子系统安装成dev依赖，然后运行时判断是否处在乾坤环境，选择是否加载登录页面。

这里只讲思路，具体实现起来并不复杂。

完成

设计思路

• 1、发送请求，返回当前登录状态
• 2、注入路由，/login
• 3、返回401：未认证--,跳转到login
• 4、执行/login请求，刷新cookie
• 5、登陆成功，跳转回默认页或退出页面

使用方式

发布到内网cnpm

1. 安装依赖

npm i qiankun-login --save-dev

2. 在main.js or main.ts 中引入

import loggedInCheck from 'qiankun-login';

3. 非乾坤环境下 Vue 实例化之后

if (!window.__POWERED_BY_QIANKUN__) {
  const router = createVueRouter(routes);
  new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount('#app');
  // router 是vue-router实例化之后的对象
  loggedInCheck(router);
}

router注入

vue-router api文档

const addRouter = router => {
    const injectedLogin = router.getRoutes().some(e => e.path === "/login");
    !injectedLogin && router.addRoute(route);
    return router;
};

TODO

• 增加模板，包含壳系统的menu和顶部导航，皮肤切换等功能