浅析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：******

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