需求：编辑后台 过多且零散，想把不同项目（react，vue等）工程合在一个一个项目；因为工程量太大，所以通过iframe合在一起最方便。
主要思想：通过iframe的url 带着参数 传值给 另一个项目，然后另一个项目接受参数。我们主要解决的是 账号互通。所以通过url，把参数带过去，然后通过cookie主动存储起来。
主工程 传参
import React, { Component } from 'react';
const { cookie } = "*****"; //自己定义的方法 ，忽略
// djqUrl 在env 文件下，主要是 根据环境 读取 测试服/正式服 的 地址
import {djqUrl} from 'env';
export default class extends Component {
constructor(props) {
super(props);
}
render() {
// 读取 token，uid 然后通过 iframe URL 传参
// 需要在 另一个项目 读取参数，并存起来
let loginToken = cookie.get("loginToken");
let loginUid = cookie.get("loginUid");
let src = `${djqUrl}tinyManage?loginToken=${loginToken}&loginUid=${loginUid}`
return (
<iframe src={src}
width="100%"
height="100%"
id="oldCommunityId"
position="relative"
overflow="auto"
/>
)
}
}
接受参数 的工程
取决你这个项目 是单页面路由 还是 多页面
- 单页面 可以通过this.props.location.query，当然，不同路由版本说不定不一样，可以打印this.props
- 多页面 可以通过 window.location.search ,或者打印window.location
// 这个是单页面
const query = this.props.location.query;
// console.log(query,'实验11111111111')
if(Object.keys(query).length <= 1){
message.error("存储 loginToken 失败")
}else{
const loginToken = query.loginToken;
const loginUid = query.loginUid;
cookie.delete("loginToken")
cookie.delete("loginUid")
cookie.set('loginToken',loginToken,0.5);
cookie.set('loginUid',loginUid,0.5);
