一、需求背景
有老系统需要重构,新做的系统需要做一个大一统的整合,类似一个分类栏目
在菜单位置罗列出有什么子系统应用,点击对应的应用菜单,展示区跳转到相应的子系统应用中
我用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、子应用免登录访问问题:
因为进入子应用不应该再次输入密码登录访问,在进入主应用的时候已经通过了认证中心的处理
这里以基础应用为例(本身也是子应用)进行改造调整:
在路由权限逻辑中追加一个免登录的跳转,判断路由路径 + 请求参数是否携带令牌,如果符号则设置令牌,继续跳转
标签:Vue,iframe,应用,前端,symbol,key,APP,name From: https://www.cnblogs.com/mindzone/p/18004135