子系统认证通信插件使用文档1.2.8

【1.2.8优化升级说明】

1、优化了同IP链接切换时的系统资源重复加载问题
	增加了系统间的通信处理方式
	新版本中在new ChildPostmate时需传入第二个参数【vue-router的实例对象】router；
	通过通信支持 + ChildPostmate内部对router的操作，实现主系统操控集成系统页面跳转的功能；

2、老版本的兼容性支持
	如已完成集成的系统仍使用旧版本插件，集成效果不变，仅性能和切换效果差于新版

3、建议
	已完成集成系统也建议使用最新版本，使用变化极小
	仅需以下两步操作：
	（1）下载新版本插件：npm i [email protected]
	（2）使用处添加新参数：router
		new ChildPostmate({...保持不变}, router)

1、安装

npm i qlfy-postmate

2、导入

import { ChildPostmate } from 'qlfy-postmate'

3、使用（main.js）

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";
import { ChildPostmate } from 'qlfy-postmate'
const store = createPinia(); //pinia实例
const app = createApp(App);

// pinia
app.use(store);

// 标识，是否为首次加载项目
let flag = true
// pinia模块
import useCounterStore from "@/store/index.js";
const $store = useCounterStore();
// 创建链接，传入router实例以支持路由更新功能
new ChildPostmate({
	error: (err) => {
		console.log('-----------------链接失败-----------------')
		app.use(router)
		app.mount("#app");
	},

	success: (success) => {
		console.log('-----------------链接成功-----------------')
	},

	// 异步方法
	receive: (dataInfo) => {
		console.log('-----------------接收数据-----------------')
		console.log(dataInfo)
		if (dataInfo.status !== 200) return
		
		// 数据更新 -- 是否隐藏页头
		$store.setIsHideHeader(dataInfo.data.isHideHeader);
		// 数据更新 -- token
		$store.setToken(dataInfo.data.token);
		// 数据更新 -- 登陆信息
		$store.setLoginInfo(dataInfo.data.loginInfo);
		// 项目挂载，仅首次加载项目时执行，后续receive触发不执行
		if (flag) {
			app.use(router)
			app.mount("#app")
		}
		flag = false
	},
}, router) // 传入router实例，支持路由更新功能

4、参数说明

| 参数名 | 说明 | 类型 | | -------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | eventObj | 事件对象集，对外暴露链接状态详细说明见下方eventObj说明 | {error:()=>voidsuccess:(childPostmate)=>viodreceive:(res:any)=>void} | | router | 当前系统的vue-router实例 | Router |

eventObj说明

| 属性（支持的事件回调） | 说明 | 类型 | | ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | error | 链接失败、未链接时执行 | ()=>void | | success | 链接成功时执行 | (chldPostmate)=>void | | receive | 父页面推送数据时执行，初次链接成功会触发一次可将本回调函数看做为websoket服务，后续父页面可能会不定时向子系统推送数据 | ( { isHideHeader:boolean, token:string, loginInfo:object, ...... })=>void |

5、方法

| 名称 | 说明 | 使用 | | ---------------- | ------------------------------------------------------------ | ---------------------------------------- | | getData | 链接成功后可通过ChildPostmate实例对象，主动向父页面获取数据 | getData((dataInfo)=>void) | | setRouter | 设置Vue Router实例和自定义路由更新回调函数用于在实例创建后设置或更新路由实例 | setRouter(router, [routeUpdateCallback]) | | sendOtherRequest | 向父页面发送自定义请求 | sendOtherRequest(params) |

注意：

1、ChildPostmate 链接的创建是异步过程，需等待error或success函数执行后才可进行登陆状态的判断

2、getData方法，仅能在链接创建完成后再调用

3、路由更新功能需要传入Vue Router实例才能使用

5、如果需要自定义路由更新逻辑，可以传入routeUpdateCallback回调函数

6、error、success函数仅作为链接状态的标注函数，不传递数据

集成调试

按下面链接格式在浏览器中访问，该链接支持前端的本地调试

http://10.76.91.86:8000/#/test?url=本地前端服务地址

url后配置本地所启用的前端服务

例：

http://10.76.91.86:8000/#/test?url=http://192.168.3.136:8080/

版本更新

1.2.6

​ 解决分系统在非一体化的iframe中事件不触发问题