【Vue】使用iframe解决多应用整合问题(微前端)

一、需求背景

有老系统需要重构，新做的系统需要做一个大一统的整合，类似一个分类栏目

在菜单位置罗列出有什么子系统应用，点击对应的应用菜单，展示区跳转到相应的子系统应用中

我用Excel简单描述了下系统的页面效果：

 

二、技术方案

第一种，使用iframe实现，html提供了iframe标签实现页面内访问其他页面的功能

第二种，使用微前端框架，微前端的实现原理很多，iframe或则组件，又或者远程调用....

　　详细见：https://www.jianshu.com/p/0aaf0daaaeee

 

基于现实情况的考量：非专业前端开发，项目成员没有前端大神，微前端一无所知，项目初版开发周期短

我们选择的方案是使用iframe实现

 

三、落地实现

主应用web + 基础应用web 共用 基础应用server的接口

基础应用相当于认证中心，其他业务server只需要认证中心的鉴权即可

所有web使用同一个令牌做前端权限控制（同理后端）

 

iframe标签内的应用和主应用共享浏览器数据，需要保持在同一个域之内

 

1、主应用web改造

主应用本身不需要server,  都是对接基础应用的，所以新增api接口

解决web登录，跳转，退出的接口问题

 

请求基础应用的令牌携带方式和一些其他参数传递的处理也调整：

 

 vuex的用户actions的方法也要调整

这里定义如何存储用户信息，和退出时需要处理的步骤逻辑

 

因为我的token存储方式和基础应用的存储方式并不一致，同一个token以两种方式存储

在退出登录的时候，一定要同步把基础应用的token删除，那这里是把那边的逻辑代码搬过来了

（见上面logout方法调用 removeJnpfToken）

 

iframe跳转实现

首先要有侧边应用菜单的选择：

<el-aside class="sub-sys-menu">
    <img :src="appLogo" class="app-logo">
    <el-menu
        mode="vertical"
        class="sub-sys-menu-list"
        :default-active="getDefaultActiveMenu"
        @select="whenMenuItemSelect"
    >
        <el-menu-item
            v-for="(m, idx) in sysMenuList"
            :key="`menu${idx}`"
            :index="m.key"
        >
            <template slot="title">
                <div class="sub-sys-menu-item">
                    <svg-icon :icon-class="m.icon" class="sub-sys-menu-icon" />
                    <span class="sub-sys-menu-title">{{ m.name }}</span>
                </div>
            </template>
        </el-menu-item>
    </el-menu>
</el-aside>

 

默认激活的应用，和应用选中后的事件处理

    getDefaultActiveMenu() {
      if (!this.sysMenuList || this.sysMenuList.length === 0) return ''
      return this.sysMenuList[0].key
    },
    async whenMenuItemSelect(key, keyPath) {
      await this.isLoginCheck()
      const app = this.appList.find(x => x.symbol === key)
      const menu = this.sysMenuList.find(x => x.key === key)
      this.currentAppUrl = `${app.url}?Authorization=${encodeURIComponent(this.currentToken)}&time=${new Date().getTime()}`
      this.currentAppTitle = menu.name
    },

　

因为点击时不是路由跳转，所以手动追加是否在线判断：

async isLoginCheck() {
      try {
        await this.$store.dispatch('UserGetInfo')
      } catch (error) {
        await this.$store.dispatch('UserResetToken')
        this.$router.push({ path: '/login' })
      }
    }

 

iframe标签去除所有边框，外边距，百分百填充容器元素

 <el-main class="frame-container">
        <iframe
          frameborder="0"
          border="0"
          marginwidth="0"
          marginheight="0"
          width="100%"
          height="100%"
          :src="currentAppUrl"
        />
      </el-main>

　　

数据定义部分：

  data() {
    return {
      color: 'red',
      appLogo: require('@/assets/sidelogo-light.png'),
      sysMenuList: [
        { name: '经营场所', icon: 'jxxcs', key: 'APP-1001' },
        { name: '非经营场所', icon: 'fjyxcs', key: 'APP-1002' },
        { name: '等保测评', icon: 'dbcp', key: 'APP-1003' },
        { name: 'APP管理', icon: 'app', key: 'APP-1004' },
        { name: '系统管理', icon: 'sz', key: 'APP-1005' }
      ],
      appList: [
        { symbol: 'APP-1001', url: 'https://www.cnblogs.com/mindzone/p/17964919' },
        { symbol: 'APP-1002', url: 'https://www.bilibili.com/' },
        { symbol: 'APP-1003', url: 'http://192.168.200.45/cp-mng-web/home' },
        { symbol: 'APP-1004', url: 'https://www.cnblogs.com/mindzone' },
        { symbol: 'APP-1005', url: 'http://192.168.200.45:3000/home' }
        // { symbol: 'APP-1005', url: 'http://172.17.29.7:3000/home' }
      ],
      currentAppUrl: '',
      currentAppTitle: '',
      currentUserName: '',
      currentToken: '',
      changeFlag: false
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'token'])
  },

　　

 页面挂载时，同步当前用户信息：

  mounted() {
    this.currentUserName = this.userInfo.userName
    this.currentToken = `${this.token}`
  },

 

2、子应用免登录访问问题：

因为进入子应用不应该再次输入密码登录访问，在进入主应用的时候已经通过了认证中心的处理

这里以基础应用为例（本身也是子应用）进行改造调整：

 在路由权限逻辑中追加一个免登录的跳转，判断路由路径 + 请求参数是否携带令牌，如果符号则设置令牌，继续跳转