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

　　這樣經過改造之后，我們刷新重新登錄主應用，然后點擊微應用的菜單，可以看到微應用就不需要再登錄了。