江苏龙网

  1. 首页 > 资讯 > 科技 > >

|公司前端代码，俺很懂( 三 )


4、由于子应用运行的环境不同 ， 项目可以加入各种各样的技术栈 ， 解决了前端人员因为技术栈不同无法聚合的问题 。
5、每个子项目拥有独自的仓储 ， 代码易维护 ， 并且可以用到别的项目中 ， 这样一来 ， 每个微前端又可以作为一个微应用提供服务 。
3、微前端开发中需要解决的问题
父子应用通信
父向子通信（Shared 通信方案）
Shared 通信方案的原理就是 ， 主应用基于 Vuex维护一个状态池 ， 通过 shared 实例暴露一些方法给子应用使用 。 同时 ， 子应用需要单独维护一份 shared 实例 ， 在独立运行时使用自身的 shared 实例 ， 在嵌入主应用时使用主应用的 shared 实例 ， 这样就可以保证在使用和表现上的一致性 。
1、在主应用中创建shared.js,可以将需要给子应用传的数据通过getter和setter的方式设置 。
import store from ''../../store''; class Shared { //获取 Token getToken() { const state = store.state; return state.user.token || ''''; } setToken(token) { // 将 token 的值记录在 store 中 store.commit('SET_TOKEN',token); } } const shared = new Shared(); export default shared;2、在init.js注册的子应用中 ， 将shared传递过去
const apps = [ { name: 'admin', entry: ''//localhost:9528'', container:'#admin', activeRule: genActiveRule('/admin'), props: { shared,//将数据以类的方式传递 } } ]3、当主应用登录成功之后可以通过调用shared.setToken(token)设置token,然后主应用通过自身路由跳转到主页this.$router.push({ path: '/' }) 。
4、现在 ， 我们来处理子应用需要做的工作 。 我们希望子应用有独立运行的能力 ， 所以子应用也应该实现 shared ， 以便在独立运行时可以拥有兼容处理能力 。 代码实现如下：
class Shared { //获取 Token getToken() { // 子应用独立运行时 ， 在 localStorage 中获取 token return sessionStorage.getItem(''token'') || ''''; } setToken(token) { // 子应用独立运行时 ， 在 localStorage 中设置 token sessionStorage.setItem(''token'', token); } } class SharedModule {//通过SharedModule 来维护shared static shared = new Shared(); static overloadShared(shared) { SharedModule.shared = shared; } static getShared() { return SharedModule.shared; } } export default SharedModule;5、接下来我们只需要在子应用的入口文件接受父应用传来的shared,然后设置到SharedModule 中 。
export async function bootstrap(props) { const {shared = SharedModule.getShared() } = props; SharedModule.overloadShared(shared); }6、然后子应用就可以在组件中通过SharedModule获取shared然后得到token,最后发起网络请求 。
mounted () { const shared = SharedModule.getShared(); const token = shared.getToken(); let resp =await this.dispatch(AppController.findById, {id: this.currentApp.appId})//封装之后的网络请求 ... }子向父通信（emit通信）
emit通信的原理是子应用通过触发父应用传递的函数来改变父应用vuex中维护的状态 ， 进而达到子应用想父应用的通信 。 这里以子应用向父应用发送token失效 ， 让父应用跳转至登录页的场景 。
1、父应用定制提供子应用触发token注销的函数
import store from ''../../store''; import { removeToken } from '@/utils/auth' function logout(childThis) { removeToken() childThis .$confirm('登录信息已过期!', '提示', { confirmButtonText: '重新登录', type: 'warning', center: true, showClose: false, showCancelButton: false, closeOnClickModal: false, }) .then(() => { store.dispatch('FedLogOut') }) } export { logout }2、将父应用定制的函数传递至子应用


推荐阅读


上一篇：AI烽火|物流共享那些事，你了解多少？

下一篇：成都商报红星新闻|“618”没买够？“718”中国西博嗨购节奉上7倍嗨购时长！