qiankun微服务搭建

1 基于乾坤微服务架构基座配置

微服务机构，主要适合的场景是项目庞大，或者本来就有多个项目，项目集成到一个平台下面，既利于新老项目的集成维护，又可以尝试使用新技术。便于整体产品的迭代升级。
主要实现功能：
1 统一登录，即由基座进行统一登录后，拿到token之后分发给子应用
2 子应用在使用axios响应拦截token过期之后，提交给基座进行再次重新登录。
3 错误统一拦截等，以及其他主要统一处理的事情。

1.1 基座配置

基于vue3 + vue-cli+pinia+js实现基座。

基座入口文件不做任何修改，在基座加载App之后，主要代码在App跟组件中完成。这样做的好处就是基于App根组件中，我们可以调用pinia和watch监听，以及完成elementUI的组件使用。
App跟组件

import { createApp } from ‘vue’
import { createPinia } from ‘pinia’
import App from ‘./App.vue’
import router from ‘./router’

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount(‘#base’)

<script setup>
import {
    
     registerMicroApps, runAfterFirstMounted, addGlobalUncaughtErrorHandler, start, initGlobalState} from "qiankun"
import {
    
     useLoginStore } from './stores/login';
import Cookies from 'js-cookie';
import {
    
     watch } from 'vue';
const LoginStore = useLoginStore();
// 对token进行判断
const cookieToken = Cookies.get('access_token');
const skipOssLogin = () => {
    
    
  ElMessageBox.confirm(
    '登录状态已过期，请重新登录',
    '系统提示',
    {
    
    
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
      draggable: false,
      type: 'warning',
      confirmButtonText: '重新登录',
      cancelButtonText: '忘记密码'
    }
  )
  .then(() => {
    
    
    window.location.href = `${
      
      import.meta.env.VITE_APP_LOGIN_URL}?redirect=${
      
      window.location.href}`;
  })
  .catch(() => {
    
    
    window.location.href = `${
      
      import.meta.env.VITE_APP_FORGETPASS_URL}?redirect=${
      
      window.location.href}`;
  })
}
if (cookieToken) {
    
    
  // 登录成功后
  LoginStore.setToken(cookieToken);
} else {
    
    
  // window.location.href = `${import.meta.env.VITE_APP_LOGIN_URL}?redirect = ${window.location.href}`;
  skipOssLogin();
}
// const baseUrl = '/qiankunbase/';
const baseUrl = '';
registerMicroApps([
    {
    
    
      name: 'qiankunmicrotest',
      entry: 'http://10.10.22.114:8082',
      // entry: 'https://www.zhushucloud.net/qiankunmicrotest/',
      container: '#container',
      activeRule:`${
      
      baseUrl}#/qiankunmicrotest`,
      props: {
    
    
        auth: LoginStore
      }
    }
  ],
  {
    
    
    beforeLoad: [
      app => {
    
    
        return Promise.resolve();
      }
    ]
  }
);
runAfterFirstMounted(() => {
    
    
  console.log('子应用加载完毕')
})
/**
2. 补取异常
*/
addGlobalUncaughtErrorHandler((event) => {
    
    
  const {
    
     message } = event;
  console.log(event, '---event---');
  // 加载失败时提示
  if (message && message .includes("died in status LOADING_SOURCE_CODE")) {
    
    
    console.log("微应用加载失败_" + message);
  }
});
// 启动 要等主页面加载完毕才能启动，即nextTick之后启动
start();
// onMounted(() => {
    
    
//   window.addEventListener("popstate", function() { 
//     alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能
//   }, false);
// })
watch(
  () => LoginStore.token,
  (newValue) => {
    
    
   if (!newValue) {
    
    
    skipOssLogin();
   }
  }
);
</script>

<template>
</template>

<style scoped>
</style>

需要解释的是pinia主要封装了设置token和修改token的方法。

import {
    
     ref } from 'vue'
import {
    
     defineStore } from 'pinia'

export const useLoginStore = defineStore('login', () => {
    
    
  const token = ref('');
  const setToken = (tokenValue) => {
    
    
    token.value = tokenValue;
  }
  const reLogin = () => {
    
    
    token.value = '';
  }
  return {
    
    token, setToken, reLogin}
})

1.2 基座和子应用之间通信

基座应用通过props将pinia数据和修改数据的方法通过props传递给子应用。并且通过提供的方法可以实现对基座数据的修改。
同时基座也在监听数据的变化，完成相应的香味。