react 使用 iframe,并传值给另一个项目

2019-04-19  本文已影响0人  kangkang来了

需求:编辑后台 过多且零散,想把不同项目(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"
        />
      )
    }
  }

接受参数 的工程

取决你这个项目 是单页面路由 还是 多页面

  // 这个是单页面
        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);
上一篇 下一篇

猜你喜欢

热点阅读