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

本文主要是介绍浅析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：******

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

这篇关于浅析qiankun主应用与微应用间如何通信解决微应用需要重复登录的问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！