完成 shared 通信

micro-app-main/src/micro/apps.ts

@@ -1,15 +1,21 @@
+import shared from "@/shared";
+
 const apps = [
   {
     name: "ReactMicroApp",
     entry: "//localhost:10100",
     container: "#frame",
-    activeRule: "/react"
+    activeRule: "/react",
+    // 通过 props 将 shared 传递给子应用
+    props: { shared },
   },
   {
     name: "VueMicroApp",
     entry: "//localhost:10200",
     container: "#frame",
-    activeRule: "/vue"
+    activeRule: "/vue",
+    // 通过 props 将 shared 传递给子应用
+    props: { shared },
   },
   // Angular 应用暂时未接入
   // {
@@ -20,4 +26,4 @@ const apps = [
   // }
 ];
 
-export default apps;
+export default apps;

micro-app-main/src/pages/login/index.vue

@@ -9,29 +9,20 @@ import { Component, Vue } from "vue-property-decorator";
 /* eslint-disable */
 import VueRouter from "vue-router";
 
-import actions from "@/shared/actions";
+import shared from "@/shared";
 import { ApiLoginQuickly } from "@/apis";
 
 @Component
 export default class Login extends Vue {
   $router!: VueRouter;
-  
-  // Vue 的生命周期钩子函数，在组件挂载时执行
-  mounted() {
-    // 注册一个观察者函数
-    actions.onGlobalStateChange((state, prevState) => {
-      // state: 变更后的状态; prevState: 变更前的状态
-      console.log("主应用观察者：token 改变前的值为 ", prevState.token);
-      console.log("主应用观察者：登录状态发生改变，改变后的 token 的值为 ", state.token);
-    });
-  }
-  
+
   async login() {
     // ApiLoginQuickly 是一个远程登录函数，用于获取 token，详见 Demo
     const result = await ApiLoginQuickly();
     const { token } = result.data.loginQuickly;
 
-    actions.setGlobalState({ token });
+    // 使用 shared 的 setToken 记录 token
+    shared.setToken(token);
     this.$router.push("/");
   }
 }

micro-app-main/src/shared/index.ts

@@ -0,0 +1,25 @@
+import store from "./store";
+
+class Shared {
+  /**
+   * 获取 Token
+   */
+  public getToken(): string {
+    const state = store.getState();
+    return state.token || "";
+  }
+
+  /**
+   * 设置 Token
+   */
+  public setToken(token: string): void {
+    // 将 token 的值记录在 store 中
+    store.dispatch({
+      type: "SET_TOKEN",
+      payload: token
+    });
+  }
+}
+
+const shared = new Shared();
+export default shared;

micro-app-main/src/shared/store.ts

@@ -0,0 +1,27 @@
+import { createStore } from "redux";
+
+export type State = {
+  token?: string;
+};
+
+type Action = {
+  type: string;
+  payload: any;
+};
+
+const reducer = (state: State = {}, action: Action): State => {
+  switch (action.type) {
+    default:
+      return state;
+    // 设置 Token
+    case "SET_TOKEN":
+      return {
+        ...state,
+        token: action.payload,
+      };
+  }
+};
+
+const store = createStore<State, Action, unknown, unknown>(reducer);
+
+export default store;

micro-app-react/src/index.js

@@ -3,16 +3,16 @@ import ReactDOM from "react-dom";
 import "antd/dist/antd.css";
 
 import App from "./App.jsx";
-import actions from "@/shared/actions";
+import SharedModule from "@/shared";
 
 if (!window.__POWERED_BY_QIANKUN__) {
   render();
 }
 
-function render(props) {
-  if (props) {
-    actions.setActions(props);
-  }
+function render(props = {}) {
+  // 当传入的 shared 不为空时，则重载子应用的 shared
+  const { shared = SharedModule.getShared() } = props;
+  SharedModule.overloadShared(shared);
 
   ReactDOM.render(<App />, document.getElementById("root"));
 }

micro-app-react/src/pages/communication/index.jsx

@@ -2,23 +2,24 @@ import React, { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { Descriptions, Avatar, message } from "antd";
 
-import actions from "@/shared/actions";
+import SharedModule from "@/shared";
 import { ApiGetUserInfo } from "@/apis";
 
 const Status = () => {
   const history = useHistory();
 
   const [token, setToken] = useState();
   useEffect(() => {
-    actions.onGlobalStateChange((state) => {
-      const { token } = state;
-      // 未登录 - 返回主页
-      if (!token) {
-        message.error("未检测到登录信息！");
-        return history.push("/");
-      }
-      setToken(token);
-    }, true);
+    const shared = SharedModule.getShared();
+    const token = shared.getToken();
+
+    // 未登录 - 返回主页
+    if (!token) {
+      message.error("未检测到登录信息！");
+      return history.push("/");
+    }
+
+    setToken(token);
   }, [history]);
 
   const [userInfo, setUserInfo] = useState({});

micro-app-react/src/shared/index.js

@@ -0,0 +1,35 @@
+class Shared {
+  /**
+   * 获取 Token
+   */
+  getToken() {
+    return localStorage.getItem("token") || "";
+  }
+
+  /**
+   * 设置 Token
+   */
+  setToken(token) {
+    localStorage.setItem("token", token);
+  }
+}
+
+class SharedModule {
+  static shared = new Shared();
+
+  /**
+   * 重载 shared
+   */
+  static overloadShared(shared) {
+    SharedModule.shared = shared;
+  }
+
+  /**
+   * 获取 shared 实例
+   */
+  static getShared() {
+    return SharedModule.shared;
+  }
+}
+
+export default SharedModule;

micro-app-vue/src/main.js

@@ -6,7 +6,7 @@ import "ant-design-vue/dist/antd.css";
 import "./public-path";
 import App from "./App.vue";
 import routes from "./routes";
-import actions from "@/shared/actions";
+import SharedModule from "@/shared";
 
 Vue.use(Antd);
 Vue.config.productionTip = false;
@@ -22,11 +22,11 @@ if (!window.__POWERED_BY_QIANKUN__) {
  * 渲染函数
  * 主应用生命周期钩子中运行/子应用单独启动时运行
  */
-function render(props) {
-  if (props) {
-    // 注入 actions 实例
-    actions.setActions(props);
-  }
+function render(props = {}) {
+  // 当传入的 shared 为空时，使用子应用自身的 shared
+  // 当传入的 shared 不为空时，主应用传入的 shared 将会重载子应用的 shared
+  const { shared = SharedModule.getShared() } = props;
+  SharedModule.overloadShared(shared);
 
   router = new VueRouter({
     base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",

micro-app-vue/src/pages/communication/index.vue

@@ -22,8 +22,8 @@
   </section>
 </template>
 <script>
-// 引入 actions 实例
-import actions from "@/shared/actions";
+// 引入 SharedModule
+import SharedModule from "@/shared";
 import { ApiGetUserInfo } from "@/apis";
 
 export default {
@@ -36,19 +36,17 @@ export default {
   },
 
   mounted() {
-    // 添加观察者
-    // onGlobalStateChange 第二个入参为 true，代表立即执行一次观察者函数
-    actions.onGlobalStateChange(state => {
-      const { token } = state;
-      // 未登录 - 返回主页
-      if (!token) {
-        this.$message.error("未检测到登录信息！");
-        return this.$router.push("/");
-      }
+    const shared = SharedModule.getShared();
+    // 使用 shared 获取 token
+    const token = shared.getToken();
+
+    // 未登录 - 返回主页
+    if (!token) {
+      this.$message.error("未检测到登录信息！");
+      return this.$router.push("/");
+    }
 
-      // 获取用户信息
-      this.getUserInfo(token);
-    }, true);
+    this.getUserInfo(token);
   },
 
   methods: {

micro-app-vue/src/shared/index.js

@@ -0,0 +1,37 @@
+class Shared {
+  /**
+   * 获取 Token
+   */
+  getToken() {
+    // 子应用独立运行时，在 localStorage 中获取 token
+    return localStorage.getItem("token") || "";
+  }
+
+  /**
+   * 设置 Token
+   */
+  setToken(token) {
+    // 子应用独立运行时，在 localStorage 中设置 token
+    localStorage.setItem("token", token);
+  }
+}
+
+class SharedModule {
+  static shared = new Shared();
+
+  /**
+   * 重载 shared
+   */
+  static overloadShared(shared) {
+    SharedModule.shared = shared;
+  }
+
+  /**
+   * 获取 shared 实例
+   */
+  static getShared() {
+    return SharedModule.shared;
+  }
+}
+
+export default SharedModule;