问题描述
- 基于乾坤微前端方案开发的系统，分为主系统和子系统两部分，主系统包含系统管理、权限管理、子系统、注册登录、导航等模块。子系统主要是某个自成体系的功能模块。
- 本地开发主系统会调起登录，登录接口返回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的安全策略成了摆设？
- 问题一是我修改了js文件之后，控制台会报“<”错误，我想应该就是解析出错了吧；
- 其次就是全局的路由和vue实例已经挂在全局了，这个过程应该是不可逆的吧？
- 页面刷新也是问题，直接
location.reload()触发更新，会重新加载本地文档（src地址：localhost），脚本加上去的内容会被清除掉。凉凉，看来这又是死胡同。
回到原点
看来cookie的安全策略是绕不开的一座山。
干不掉的对手，就想办法和它做朋友
从朋友那取了经，还是应该老老实实的把登录从壳系统里面抽离出来，最好抽成独立的模块，生产npm包，子系统安装成dev依赖，然后运行时判断是否处在乾坤环境，选择是否加载登录页面。
这里只讲思路，具体实现起来并不复杂。
完成
设计思路
- 1、发送请求，返回当前登录状态
- 2、注入路由，/login
- 3、返回401：未认证--,跳转到login
- 4、执行/login请求，刷新cookie
- 5、登陆成功，跳转回默认页或退出页面
使用方式
发布到内网cnpm
- 安装依赖
npm i qiankun-login --save-dev
- 在main.js or main.ts 中引入
import loggedInCheck from 'qiankun-login';
- 非乾坤环境下 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注入
const addRouter = router => {
const injectedLogin = router.getRoutes().some(e => e.path === "/login");
!injectedLogin && router.addRoute(route);
return router;
};
TODO
- 增加模板，包含壳系统的menu和顶部导航，皮肤切换等功能
网友评论