浅析qiankun主应用与微应用间如何通信解决微应用需要重复登录的问题

一、问题背景

　　当主应用登录后，再进去微应用发现还需要登录，相当于登录状态没有同步。

二、解决方案  ——  主应用与微应用通信

　　qiankun微前端应用间的通信，我们要利用qiankun框架的initGlobalState和MicroAppStateActions api，相关的api介绍如下：

（1）setGlobalState：设置 globalState - 设置新的值时，内部将执行浅检查，如果检查到globalState发生改变则触发通知，通知到所有的观察者函数。

（2）onGlobalStateChange：注册观察者函数 - 响应globalState变化，在globalState发生改变时触发该观察者函数。

（3）offGlobalStateChange：取消观察者函数 - 该实例不再响应globalState变化。

　　所以承接上篇，我们需要改造一下两个项目：

1、首先是主应用的micros/index.js

import { registerMicroApps, addGlobalUncaughtErrorHandler, start, initGlobalState // 新增
} from "qiankun"; const state = {} const actions = initGlobalState(state); export { actions }

2、以上新增了并导出了actions，然后去到login.vue —— 登录之后通知所有微应用去同步登录状态


import { actions } from "@/micros"; //新增

const login = () => { if (username.value && password.value) { store.commit("setToken", "123456"); // 新增
    actions.setGlobalState({globalToken: "******"}); router.push({path: "/"}); } };

　　引入actions并新增了actions.setGlobalState方法，通知所有微应用

3、然后是子应用的 main.js —— 主要是需要增加监听方法


function render(props) { console.log("子应用render的参数", props) // 新增 
  props.onGlobalStateChange((state, prevState) => { // state: 变更后的状态; prev 变更前的状态 
    console.log("通信状态发生改变：", state, prevState); // 这里监听到globalToken变化再更新store
    store.commit('setToken', '******')  }, true); // 挂载应用 
  instance = new Vue({ router, store, render: (h) => h(App), }).$mount("#micro-app"); }

　　在render方法中我们加上onGlobalStateChange，并且第二位参数置为true，这样微应用一启动的时候，我们马上就可以看到刚刚设置的 globalToken：******

　　这样经过改造之后，我们刷新重新登录主应用，然后点击微应用的菜单，可以看到微应用就不需要再登录了。