//main.js

// import Vue from 'vue'
// import App from './App.vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'

// import '@/styles/index.scss' // global css

// import router from './router'
// import store from './store'

// import './icons' // 自动渲染svg
import './permission' // permission control
// 初始化的时候简历通信机制 详细见下文
import { initState } from '@/initQiankunState/index.js'
// 初始化的时候将本地路由和动态路由全部合并，生成全量路由表 详细见下文
import { makeAllRouter } from '@/makeAllComponentRouter/index.js'
// workspace正式启动
console.log('workspace-start')
// 初始化qiankun
initState()
makeAllRouter()

// Vue.use(ElementUI)

// Vue.config.productionTip = false

// window.App = new Vue({
//   router,
//   store,
//   render: h => h(App)
// }).$mount('#app')

//@/initQiankunState/index.js

import { initGlobalState } from 'qiankun'
// goToRouter见下文
import { goToRouter } from './navigator.js'
// 退出登录 见下文
import { clearLogin } from '@/utils/tokenExpired.js'

export const initState = function() {
 console.log('开始初始化state')
 // allInfoJSON是从做完登陆动作从登陆login接口获取一些基本的鉴权和用户信息和菜单数据数据给到子应用
 /***
 eg: {
         'name': 'steven',
         'username': 'steven',
         'authToken': '400e4386-38f1-4d56-ab63-a9b0a2694344dc',
         'menus': [
           {
             'name': '手机业务来自子应用url',
             'id': 'sub_app',
             'url': 'http://121.5.172.29:8081/#/suborigin/suborigin'
           },
           {
             'name': '电话业务来自子应用url',
             'id': 'sub_app2',
             'url': 'http://121.5.172.29:8081/#/subattr/subattr'
           }
         ]
   }
  **/
 const allInfoJSON = window.localStorage.getItem('allUserInfo') || '{}'
 // window.actionsQiankun用来只初始化一次，防止重复初始化
 if (!window.actionsQiankun) {
   const allInfo = JSON.parse(allInfoJSON)
   // 第一次初始化globalState
   window.actionsQiankun = initGlobalState({
     authToken: allInfo.authToken, //token
     appName: '',  //子应用名称，方便应用通信知道来源
     eventType: '', //事件类型，方便区分通信是用来做什么的
     routeParams: {}, //子应用发起跳转路由请求时候需要的路由参数
     subAppOptions: {} //额外的子应用需要的自定义的一些传输参数
   })
   // 主应用监听change
   window.actionsQiankun.onGlobalStateChange((state, prev) => {
     console.log('子应用收到的全量state', state)
     // 处理路由跳转
     if (state.eventType === 'NAVIGATETO' && state.routeParams) {
       console.log('开始路由跳转', state.routeParams)
       //根据参数做响应跳转动作 
       goToRouter(state)
     }
     // 处理过期
     if (state.eventType === 'TOKEN_EXPIRED') {
       console.log('登录过期')
       clearLogin()
     }
   })
 } else {
   console.log('已经初始化过state')
 }
}

// navigator.js

import { Message } from 'element-ui'
// 子应用手动跳转路由时候需要根据子应用提供的url，动态添加到路由表
// autoFillComponent和 addAllRoutes 方法可以自动讲url转换成路由格式，具体见下文
import { autoFillComponent, addAllRoutes } from '@/makeAllComponentRouter/makeComponents.js'
import router from '@/router/index.js'
export const goToRouter = (state) => {
 if (!state.routeParams?.name) {
   Message({
     message: '缺少路由name，请联系管理员',
     type: 'error',
     duration: 3 * 1000
   })
   return
 }
 if (!state.routeParams?.url) {
   Message({
     message: '缺少路由url，请联系管理员',
     type: 'error',
     duration: 3 * 1000
   })
   return
 }
 // autoFillComponent方法可以自动讲url转换成路由格式，具体见下文
 const fullRouter = autoFillComponent(state.routeParams, true)
 const firstChild = fullRouter.children[0] || {}
 // 如果子应用提供的url有查询参数还需要，获取取query
 const queryStr = firstChild.meta?.query || ''
 const urlSearchParams = new URLSearchParams(queryStr)
 const query = Object.fromEntries(urlSearchParams.entries())
 console.log('urlquery', query)
 // 生成动态路由
 addAllRoutes([fullRouter])
 // 除了正常加入全量动态路由外，考虑到subApp给的临时路由会存在刷新页面的情况，所以需要收集上传的路由到本地，
 // 然后刷新页面初始化路由的时候再把本地临时路由加回去
 const tempRouteJson = window.localStorage.getItem('tempRouteJson')
 const tempRoute = tempRouteJson ? JSON.parse(tempRouteJson) : []
 let routeHasExist = false
 for (let index = 0; index < tempRoute.length; index++) {
   const element = tempRoute[index] || {}
   if (element.url === state.routeParams.url) {
     routeHasExist = true
     break
   }
 }
 if (!routeHasExist) {
   tempRoute.push(state.routeParams || {})
 }
 window.localStorage.setItem('tempRouteJson', JSON.stringify(tempRoute))

 router.push({
   path: firstChild.path,
   query
 })
}

// clearLogin

import router from '@/router/index.js'
import { removeToken } from '@/utils/auth'
let disable = false
export const clearLogin = () => {
 if (!disable) {
   disable = true
   console.log('开始执行removeToken-tokenExpired')
   removeToken()
   router.push('/login')
 }
 setTimeout(() => {
   disable = false
 }, 1500)
}

// utils/auth.js

import Cookies from 'js-cookie'

const TokenKey = 'workspace-token'

export function getToken() {
 return Cookies.get(TokenKey)
}

export function setToken(token) {
 return Cookies.set(TokenKey, token)
}

export function removeToken() {
 window.localStorage.removeItem('allUserInfo')
 window.localStorage.removeItem('tempRouteJson')
 console.log('localStorage has been cleared by remove token')
 return Cookies.remove(TokenKey)
}

//makeAllComponentRouter/index.js

import { autoFillComponent } from '@/makeAllComponentRouter/makeComponents.js'
import { addAllRoutes } from '@/makeAllComponentRouter/makeComponents.js'
import { resetRouter } from '@/router/index.js'
//拆分path和origin详情见下文
import { splitUrl } from '@/utils/qiankunMethods.js'
import Vuex from '@/store/index'
// 预加载提高性能
import { prefetchApps } from 'qiankun'

// 抽出所有的tree结构的最后一层动态路由，做flat处理，然后拼装成qinakun模式。
function makePathArr(menus = []) {
 const pathArrTemp = []
 // 第一层
 for (let firstIndex = 0; firstIndex < menus.length; firstIndex++) {
   const firstElement = menus[firstIndex]
   // 这里的menus是后端通过权限返回的信息，需要有全量url、唯一id和名称。
   /*** 
   eg: {
         'name': '电话业务来自子应用url',
         'id': 'sub_app2',
         'url': 'http://121.5.172.29:8081/#/subattr/subattr'
       }
   **/
   if (firstElement.url && firstElement.id && firstElement.name) {
     pathArrTemp.push(firstElement)
   }
 }
 return pathArrTemp
}

export const makeAllRouter = function() {
 const fullRouter = []
 const userInfo = JSON.parse(window.localStorage.getItem('allUserInfo') || '{}')
 // allInfoJSON是从做完登陆动作从登陆login接口获取一些基本的鉴权和用户信息和菜单数据数据给到子应用
 /***
 eg: {
         'name': 'steven',
         'username': 'steven',
         'authToken': '400e4386-38f1-4d56-ab63-a9b0a2694344dc',
         'menus': [
           {
             'name': '手机业务来自子应用url',
             'id': 'sub_app',
             'url': 'http://121.5.172.29:8081/#/suborigin/suborigin'
           },
           {
             'name': '电话业务来自子应用url',
             'id': 'sub_app2',
             'url': 'http://121.5.172.29:8081/#/subattr/subattr'
           }
         ]
   }
  **/
 const preLoadArr = []
 if (userInfo.menus) {
   const pathArr = makePathArr(userInfo.menus)
   console.log('pathArr:', pathArr)
   for (let index = 0; index < pathArr.length; index++) {
     // 拼接成qianku专属路由
     const element = pathArr[index]
     const fullSingleRouter = autoFillComponent(element)
     fullRouter.push(fullSingleRouter)
     //拆分path和origin详情见下文
     const pathSplit = splitUrl(element.url)
     const host = pathSplit[0]
     preLoadArr.push(host)
   }
 } else {
   console.log('未登录或者已经初始化过router')
 }
 // 除了从后端取得登录接口里的路由以外，还有存的临时路由要处理
 const tempRouteJson = window.localStorage.getItem('tempRouteJson')
 const tempRoute = tempRouteJson ? JSON.parse(tempRouteJson) : []
 if (tempRoute.length > 0) {
   for (let index = 0; index < tempRoute.length; index++) {
     const element = tempRoute[index] || {}
     const fullSingleRouter = autoFillComponent(element, true)
     fullRouter.push(fullSingleRouter)
   }
 }
 if (fullRouter.length > 0) {
   // 制造路由之前先初始化路由
   resetRouter()
   console.log('制造好的全量qiankun路由为:', fullRouter)
   // 添加到路由表
   addAllRoutes(fullRouter)
 } else {
   // console.log('开始执行removeToken-makeAllRouter')
   // removeToken()
   console.log('没有菜单')
 }

 // 开始预加载
 const preLoadArrSet = [...new Set(preLoadArr)]
 console.log(preLoadArrSet, 'preLoadArr')
 // 暂存到vuex
 Vuex.commit('permission/CHANGE_PRELOAD', preLoadArrSet)
 const qiankunConfigArr = preLoadArrSet.map((preLoad, index) => {
   return {
     name: `qiankunPreloadSubapp${index}`,
     entry: preLoad
   }
 })
 // window.hasPreloadSubApp防止重复预加载
 if (!window.hasPreloadSubApp) {
   prefetchApps(qiankunConfigArr)
   window.hasPreloadSubApp = true
 }
}

//splitUrl

import { Message } from 'element-ui'
export const splitUrl = (url = '') => {
 try {
   const urlObj = new URL(url)
   const origin = urlObj.origin
   // 如果是hash模式
   if (urlObj.hash) {
     const hashPath = urlObj.hash.slice(1)
     // 有查询参数拆分
     if (hashPath.includes('?')) {
       // 拆分查询参数和path
       const pathAnQueryArr = hashPath.split('?')
       const hasPathOnly = pathAnQueryArr[0]
       const query = `?${pathAnQueryArr[1]}`
       return [origin, hasPathOnly, query]
     } else {
       return [origin, hashPath]
     }
   }
   if (urlObj.pathname) {
     if (urlObj.search) {
       return [origin, urlObj.pathname, urlObj.search]
     } else {
       return [origin, urlObj.pathname]
     }
   }
 } catch (error) {
   Message.error(`解析菜单url失败,非法的url为：${url}`)
   console.error(error)
   return [window.location.origin, `/unknown${Math.random() * 100}`]
 }
}

// makekeAllComponentRouter/makeComponents.js

import { loadMicroApp } from 'qiankun'
import Layout from '@/components/layout'
import store from '@/store/index.js'
import router from '@/router/index.js'
import { splitUrl } from '@/utils/qiankunMethods.js'
import { getToken } from '@/utils/auth.js'
const md5 = require('md5')

export const autoFillComponent = (element = {}, isFromSubApp = false) => {
 const pathSplit = splitUrl(element.url)
 const host = pathSplit[0]
 const allPath = pathSplit[1]
 const query = pathSplit[2]
 const queryForSearch = {}
 if (query) {
   const queryOnly = query.slice(1)
   console.log(queryOnly, 'queryOnly')
   const tmpFirstArr = queryOnly.split('&')
   for (let index = 0; index < tmpFirstArr.length; index++) {
     const element = tmpFirstArr[index]
     const tmpSecondArr = element.split('=')
     const key = tmpSecondArr[0] || 'errorKey'
     const value = tmpSecondArr[1] || 'errorValue'
     queryForSearch[key] = value
   }
 }
 const splitPath = allPath.split('/')
 const firstPath = splitPath[1]
 // isFromSubApp标识从subApp传来的跳转路由方式，因为qiankun的name必须唯一，
 // 所以防止打开多个基础路由相同详情页的情况下报错(因为name相同), 需要标记id+path 作为唯一的标识。
 // md5防止出现特殊字符
 const identity = isFromSubApp ? `sub${md5(allPath)}` : element.id
 return {
   path: `/${firstPath}${identity}`,
   meta: {
     title: element.name
   },
   component: Layout,
   children: [
     {
       path: allPath,
       name: identity,
       component: {
         render: function(h) {
           return h(
             'div',
             {
               attrs: {
                 id: identity,
                 class: `full-height-and-width`
               }
             },
             [h('div', {
               attrs: {
                 class: 'full-height-and-width-spin'
               }
             }, '加载中')]
           )
         },
         name: identity,
         data() {
           return {
             loading: false,
             microApp: null,
             routePath: '',
             name: '',
             username: ''
           }
         },
         activated() {
           console.log('activated subapp')
           if (this.microApp.update) {
             this.microApp.update({
               routePath: this.routePath,
               lifeCycle: 'onactive'
             })
           }
         },
         mounted() {
           console.log(this.$el, 'curent subapp mounted')
           this.initQiankunMicroApp()
         },
         methods: {
           initQiankunMicroApp() {
             this.loading = true
             store.commit('permission/CHANGE_MOUNTED_STATUS', this.loading)
             console.log('当前qiankun容器的this.$route路由为:', this.$route)
             const entry = this.$route.meta.qiankunConfig.entry
             //   如果qiankunconfig有path就从qankun获取 如果没有去 默认的path
             this.routePath = this.$route.meta.qiankunConfig.routePath || this.$route.path
             this.microApp = loadMicroApp({
               name: identity,
               entry,
               container: `#${identity}`,
               props: {
                 routePath: this.routePath,
                 query: queryForSearch,
                 workspaceWindow: window,
                 loginInfo: {
                   platform: 'WORKSPACE',
                   type: '2',
                   authToken: getToken()
                 }
               }
             }, {
               excludeAssetFilter: url => (url.includes('baidu') || url.includes('bdimg'))
             })
             this.microApp.mountPromise.then(() => {
               this.loading = false
             }).catch((err) => {
               console.log(err, 'mount sub app fail')
             }).finally(() => {
               this.loading = false
               console.log('子应用 finally')
               store.commit('permission/CHANGE_MOUNTED_STATUS', this.loading)
             })
           }
         },
         beforeDestroy() {
           console.log('beforeDestroy')
           store.commit('permission/CHANGE_MOUNTED_STATUS', false)
           if (this.microApp) {
             this.microApp.unmount()
           }
         }
       },
       meta: {
         qiankunConfig: {
           entry: host
         },
         query,
         title: element.name,
         icon: 'form',
         activeMenu: element.activeMenu
       }
     }
   ]
 }
}
// 生成动态路由
export const addAllRoutes = (fullRouter = []) => {
 store.commit('permission/ADD_DYNAMIC_ROUTES', fullRouter)
 router.addRoutes(fullRouter)
}

// permisson.js

import router from './router'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import Vuex from '@/store/index'
import { match } from 'path-to-regexp'
NProgress.configure({ showSpinner: false }) // NProgress Configuration

const rawAppendChild = HTMLHeadElement.prototype.appendChild
const rawAddEventListener = window.addEventListener
let rawAppendChildSubCopy = null
let rawAddEventListenerSubCopy = null
const whiteList = ['/login'] // no redirect whitelist
// 用来处理qiankun 从子应用跳转到主应用 无法渲染主应用css和js的bug 结束

router.beforeEach((to, from, next) => {
 // start progress bar
 NProgress.start()

 // determine whether the user has logged in
 const hasToken = getToken()

 if (hasToken) {
   console.log('有token')
   if (to.path === '/login') {
     console.log('path是login')
     // if is logged in, redirect to the home page
     next({ path: '/' })
     NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
   } else {
     console.log('开始鉴权qiankun路由')
     // 获取全量动态路由
     const allRouterPathArr = Vuex.state.permission.addPaths || []
     const isChildRoute = path => allRouterPathArr.some(item => {
       const fn = match(item, { decode: decodeURIComponent })
       return !!fn(path)
     })
     console.log('开始鉴权qiankun路由结束')
     if (isChildRoute(from.path) && !isChildRoute(to.path)) {
       console.log('从子应用路由跳转到主应用路由')
       rawAppendChildSubCopy = HTMLHeadElement.prototype.appendChild
       rawAddEventListenerSubCopy = window.addEventListener
       HTMLHeadElement.prototype.appendChild = rawAppendChild
       window.addEventListener = rawAddEventListener
       console.log('qiankun整体结束')
     } else if (!isChildRoute(from.path) && isChildRoute(to.path)) {
       if (rawAppendChildSubCopy && rawAddEventListenerSubCopy) {
         HTMLHeadElement.prototype.appendChild = rawAppendChildSubCopy
         window.addEventListener = rawAddEventListenerSubCopy
       }
       console.log('qiankun整体结束')
     }
     // 用来处理qiankun 从子应用跳转到主应用 无法渲染主应用css和js的bug 结束
     next()
   }
 } else {
   /* has no token*/
   console.log('没有token')
   if (whiteList.indexOf(to.path) !== -1) {
     console.log('在白名单')
     // in the free login whitelist, go directly
     next()
   } else {
     // other pages that do not have permission to access are redirected to the login page.
     console.log('不在白名单', to)
     next(`/login`)
     NProgress.done()
   }
 }
})

router.afterEach(() => {
 // finish progress bar
 NProgress.done()
})

// sidebar.vue

<template>
  <div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in allMenusfull" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Scrollbar } from 'element-ui'
import SidebarItem from './SidebarItem'
import { splitUrl } from '@/utils/qiankunMethods.js'
import { constantRoutes } from '@/router/index'
import variables from '@/styles/variables.scss'

export default {
  components: { SidebarItem, elScrollbar: Scrollbar },
  data() {
    return {
      allMenusfull: []
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    routes() {
      return this.$router.options.routes
    },
    activeMenu() {
      const route = this.$route
      const { path } = route
      return path
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  created() {
    // 生成动态+固定的全量菜单
    this.makeAllDynamicMenus()
    this.makeStaticRouter()
  },
  methods: {
    fullMenuInfo(element) {
      element.path = element.id
      element.meta = {
        icon: element.icon || element.privilegeIcon,
        title: element.name
      }
    },
    fullRouternfo(element) {
      // 按标准格式填充路由
      const pathSplit = splitUrl(element.url)
      const allPath = pathSplit[1]
      element.path = allPath
      element.meta = {
        title: element.name
      }
    },
    fullFisrtNoChildren(element) {
      // 按标准格式填充路由
      const pathSplit = splitUrl(element.url)
      const allPath = pathSplit[1]
      const splitPath = allPath.split('/')
      const firstPath = splitPath[1]
      element.path = `/${firstPath}${element.id}`
      element.meta = {
        title: element.name
      }
      element.children = [
        {
          path: allPath,
          name: element.id,
          meta: { title: element.name, icon: 'form' }
        }
      ]
    },
    makeAllDynamicMenus() {
      const allInfoJson = window.localStorage.getItem('allUserInfo') || '{}'
      const allUserInfo = JSON.parse(allInfoJson)
      // allInfoJSON是从做完登陆动作从登陆login接口获取一些基本的鉴权和用户信息和菜单数据数据给到子应用
      /***
          eg: {
                  'name': 'steven',
                  'username': 'steven',
                  'authToken': '400e4386-38f1-4d56-ab63-a9b0a2694344dc',
                  'menus': [
                    {
                      'name': '手机业务来自子应用url',
                      'id': 'sub_app',
                      'url': 'http://121.5.172.29:8081/#/suborigin/suborigin'
                    },
                    {
                      'name': '电话业务来自子应用url',
                      'id': 'sub_app2',
                      'url': 'http://121.5.172.29:8081/#/subattr/subattr'
                    }
                  ]
            }
       **/
      const menus = allUserInfo.menus || []
      for (let firstIndex = 0; firstIndex < menus.length; firstIndex++) {
        const firstElement = menus[firstIndex] || {}
        this.fullFisrtNoChildren(firstElement)
      }
      this.allMenusfull = menus
    },
    makeStaticRouter() {
      // copy一下 不能破坏路由原始文件
      const constantRoutesCopy = JSON.parse(JSON.stringify(constantRoutes))
      const menusNoHidden = constantRoutesCopy.filter(item => !item.hidden)
      this.allMenusfull = [...menusNoHidden, ...this.allMenusfull]
      console.log('左侧全量的菜单数据为:', this.allMenusfull)
    }
  }
}
</script>

// 登录按钮点完之后
this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true
      setTimeout(() => {
        const res = {
          'name': 'steven',
          'username': 'steven',
          'authToken': '400e4386-38f1-4d56-ab63-a9b0a2694344dc',
          'menus': [
            {
              'name': '手机业务来自子应用url',
              'id': 'sub_app',
              'url': 'http://121.5.172.29:8081/#/suborigin/suborigin'
            },
            {
              'name': '电话业务来自子应用url',
              'id': 'sub_app2',
              'url': 'http://121.5.172.29:8081/#/subattr/subattr'
            }
          ]
        }
        const result = res
        window.localStorage.setItem('allUserInfo', JSON.stringify(result))
        // 初始化乾坤状态
        initState()
        // initState之后 window.actionsQiankun一定是存在的 可以放心变更token
        window.actionsQiankun.setGlobalState({
          authToken: result.authToken,
          appName: 'WORKSPACE',
          eventType: 'SET_TOKEN'
        })
        // 初始化路由 用于退出之后生成新的路由
        makeAllRouter()
        setToken(result.authToken)
        this.$router.push({
          name: 'Dashboard'
        })
        this.loading = false
      }, 1000)
    } else {
      console.log('error submit!!')
      return false
    }
})

//public-path.js

if (window.__POWERED_BY_QIANKUN__) {
   //window.__POWERED_BY_QIANKUN__ 是qiankun注入的动态publicPath路径
 // eslint-disable-next-line no-undef
 __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

//main.js

import './public-path.js' 
import Vue from 'vue'
//...其他初始化代码 注意public-path 一定是在第一行

//vue.config.js

const { name } = require('./package')
function recursiveIssuer(m) {
 if (m.issuer) {
   return recursiveIssuer(m.issuer)
 } else if (m.name) {
   return m.name
 } else {
   return false
 }
}

module.exports = {
   configureWebpack: {
   output: {
     library: `${name}-[name]`,
     libraryTarget: 'umd', // 把微应用打包成 umd 库格式
     jsonpFunction: `webpackJsonp_${name}`
   }
 },
   chainWebpack: config => {
   // 合并css
   const splitOptions = config.optimization.get('splitChunks')
   // 这里的 appStyles 中的 app 是入口文件的配置名称(从 vue inspect 中可以得到)
   splitOptions.cacheGroups.appStyles = {
     name: 'styles',
     test: (m, c, entry = 'app') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
     chunks: 'all',
     minChunks: 1,
     enforce: true
   }
   config.optimization.splitChunks(splitOptions)

   // 子应用需要取消预加载
   config.plugins.delete('prefetch-index')
   config.plugins.delete('preload-index')
 }
}

//actions.js

function emptyAction() {
 // 提示当前使用的是空 Action
 console.warn('Current execute action is empty!')
}

class Actions {
   // 默认值为空 Action
   actions = {
     onGlobalStateChange: emptyAction,
     setGlobalState: emptyAction
   };

   /**
    * 设置 actions
    */
   setActions(actions) {
     this.actions = actions
   }

   /**
    * 映射
    */
   onGlobalStateChange(...args) {
     return this.actions.onGlobalStateChange(...args)
   }

   /**
    * 映射
    */
   setGlobalState(...args) {
     return this.actions.setGlobalState(...args)
   }
}

const actions = new Actions()
export default actions

import './public-path.js'
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
import '@/styles/index.scss' // global css
import store from './store'
import './icons' // 自动渲染svg
Vue.config.productionTip = false

import routes from './router'
import actions from './actions.js'

let appInstance = null
let router = null

function render(props = {}) {
 const { container, routePath, query } = props
 // routePath用于qiankun手动加载用的vue-router的abstract模式
 if (routePath) {
   window.routePathFromQianKun = routePath
 }
 if (query) {
   window.queryFromQianKun = query
 }
 // 如果有routePath从qiankun注入，说明当前是需要手动加载，路由模式为abstract
 const mode = window.__POWERED_BY_QIANKUN__ ? (routePath ? 'abstract' : 'history') : 'hash'
 router = new VueRouter({
   scrollBehavior: () => ({ y: 0 }),
   mode,
   routes: routes
 })
 // 如果有container从qiankun注入，要把dom绑定到qiankun提供的dom内。因为qiankun体系中dom是隔离状态
 appInstance = new Vue({
   el: container ? container.querySelector('#sub-app') : '#sub-app',
   router,
   store,
   render: (h) => h(App)
 })
}

// window.__POWERED_BY_QIANKUN__可用于判断当前项目是否由qiankun驱动
if (!window.__POWERED_BY_QIANKUN__) {
 render()
}

export async function bootstrap() {
 console.log('[vue] vue app bootstraped')
}

export async function mount(props) {
 // 子应用加载完成后注册通信模块获取workspace下发的数据
 actions.setActions(props)
 console.log('[vue] props from main framework', props)
 render(props)
}

export async function unmount() {
 appInstance.$notify && appInstance.$notify.closeAll()
 console.log('[vue] unmount')
}

export async function update(props) {
 console.log('sub app updated')
}

//store/modules/qiankun.js

const state = {
 authToken: '',
}

const mutations = {
 CHANGE_AUTH_TOKEN: (state, authToken) => {
   console.log(authToken, 'auth token')
   state.authToken = authToken
 }
}

const actions = {

}

export default {
 namespaced: true,
 state,
 mutations,
 actions
}

<script>
import actions from '@/actions.js'
export default {
 name: 'App',
 data() {
   return {
   }
 },
 created() {
   this.initQiankunGlobalState()
 },
 mounted() {
   // 如果是从qiankun loadMicroApp进来的 需要用abstract路由跳转
   if (window.routePathFromQianKun) {
     this.$router.push({
       path: window.routePathFromQianKun,
       query: window.queryFromQianKun || {}
     })
   }
 },
 methods: {
   initQiankunGlobalState() {
     const immediately = true //true表示立刻触发
     actions.onGlobalStateChange((state, pre) => {
       // 建议token存到vuex中，可以保持自身子应用token独立无冲突
       this.$store.commit('qiankun/CHANGE_AUTH_TOKEN', state.authToken)
       // 其他需要从qiankn里面获取state的都在这里初始化获取
       console.log(state)
     }, immediately)
   }
 }
}
</script>

// request.js

import axios from 'axios'
import Vuex from '@/store/index'
//动态获取origin
const origin = window.__POWERED_BY_QIANKUN__ ? window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ : window.location.origin
const servies = axios.create({
 baseURL: origin,
 withCredentials: true // 允许携带cookie
})
servies.interceptors.request.use(
 config => {
        //全局补上authToken
   config.headers['AUTH-TOKEN'] = Vuex.state.qiankun.authToken
   return config
 },
 () => {
   return Promise.reject()
 }
)
// 登录失效上报到workspace做退出登录处理
servies.interceptors.response.use(
 response => {
   if (response.data.code === 401) {
     actions.setGlobalState({
       appName: 'RAM', //记得更改成自己的子应用名称，名称见通信文档
       eventType: 'TOKEN_EXPIRED'
     })
   }
 },
 error => {
   return Promise.reject(error)
 }
)

const state = {
 authToken: '',
 routeParams: {
   name: '', //菜单名称，用户tab页签显示
   url: '', //菜单全量url地址
   id: '', //菜单id 需要保证唯一
   activeMenu: ''  // 用于菜单高亮的字段
 },
 ramOptions: {

 }
}

const mutations = {
 CHANGE_AUTH_TOKEN: (state, authToken) => {
   console.log(authToken, 'auth token')
   state.authToken = authToken
 },
 CHANGE_ROUTE_PARAMS: (state, routeParams) => {
   console.log(routeParams, 'routeParams')
   state.routeParams = routeParams
 }
}

const actions = {

}

export default {
 namespaced: true,
 state,
 mutations,
 actions
}

//window.__POWERED_BY_QIANKUN__可用于判断当前项目是否由qiankun驱动
if (window.__POWERED_BY_QIANKUN__) {
   this.$store.commit('qiankun/CHANGE_ROUTE_PARAMS', {
       name: name,
       url: `${process.env.VUE_APP_BASE_HOST}/#/suborigin/suborigin`,
   })
   actions.setGlobalState({
       appName: 'subapp',
       eventType: 'NAVIGATETO',
       routeParams: this.$store.state.qiankun.routeParams
   })
} else {
   this.$router.push({
       name: routeName,
       params: routeParams
   })
}