SecurityLayout.js

import React from 'react';
import Cookies from 'js-cookie';
import { connect } from 'react-redux';
import { Redirect, history } from '@wisdom-utils/runtime';
import PageLoading from '@wisdom-utils/components/lib/AppLayout/components/PageLoading';
import _ from 'lodash';
import { stringify } from 'querystring';
import { store, helpers } from '@wisdom-utils/utils';
import { ValidDefaultPWDContainer } from '@/components/Container';
import { logout } from '@/containers/App/store/actions';
import { initSaveMicroApps } from '../micro';

class SecurityLayout extends React.Component {
  state = {
    isReady: false,
  };

  componentDidMount() {
    this.setState({
      isReady: true,
    });
    document.title = this.props.global.title;
    if (window.share && window.share.event) {
      window.share.event.on('event:logoutPackage', this.handleLogoutPackage);
      window.share.event.on("iframe:postMessage", this.handleIframePostMessage)
      window.share.event.on("event:isHasFrame", this.handleIsHasFrame)
    }
  }

  componentWillUnmount() {
    if (window.share && window.share.event) {
      window.share.event.removeListener('event:logoutPackage', this.handleLogoutPackage);
      window.share.event.removeListener("iframe:postMessage", this.handleIframePostMessage)
      window.share.event.removeListener("event:isHasFrame", this.handleIsHasFrame)
    }
  }

  // 退出登录
  handleLogoutPackage() {
    logout && logout();
  }

  //发送消息，因为子包无法通信
  handleIframePostMessage (data) {
    if(!(window.parent && data)) return
    window.parent.postMessage(data, "*")
  }

  //获取当前页面是否嵌套
  handleIsHasFrame() {
    window.share.event.emit("event:getHasFrame", {
      hasFrame : window != window.parent
    })
  }

  componentWillReceiveProps(nextProps) {
    const products = (this.props.global.products || []).map(item => {
      if (item.PackageName === 'civweb4') {
        return 'web4_console';
      }
      return `${item.PackageName}-main`;
    });
    const { location } = this.props;
    const { pathname } = location;
    const argv = pathname.split('/');

    const nextPathname = nextProps.location.pathname;
    const nextArgv = nextPathname.split('/');
    if (argv[2] !== nextArgv[2]) {
      Object.keys(products).forEach(item => {
        window[products[item]] &&
          window[products[item]] &&
          window[products[item]].unmount &&
          window[products[item]].unmount({ store });
      });
    }
    if (this.props.location.pathname !== nextProps.location.pathname) {
      if (window?.qiankunIsCache) {
        const marks = document.querySelectorAll('#micro-container');
        if (marks && marks.length) {
          const activeAppPath = nextProps.location.pathname.match(/(\w+)/)
            ? nextProps.location.pathname.match(/(\w+)/)[0]
            : null;
          if (activeAppPath) {
            initSaveMicroApps(nextProps.location.pathname, nextProps.global);
          }
        }
      } else {
        store.set('event:globalConfig', { globalConfig: nextProps.global });
      }
    }
  }

  render() {
    const { isReady } = this.state;
    const { children, global, loading } = this.props;
    const tk = Cookies.get('token') || global.token;
    const isLogin = tk !== null && tk !== 'undefined' && tk !== void 0;
    const { pathname } = history.location;
    if (
      (!isLogin && window.location.pathname !== '/civbase/user/login') ||
      // eslint-disable-next-line no-prototype-builtins
      (global.hasOwnProperty('size') && global.size === 0)
    ) {
      this.props.updateCurrentIndex && this.props.updateCurrentIndex(0);
      let client = global.client || sessionStorage.getItem('client');
      client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
      client = client || 'city';
      let { generateType } = global;
      generateType =
        !_.isNull(generateType) && !_.isUndefined(generateType) && generateType !== 'undefined'
          ? `&generateType=${generateType}`
          : '';
      // eslint-disable-next-line prettier/prettier
      window.qiankunStarted = false;
      return (
        <Redirect to={{ pathname: `/user/login?client=${client}${generateType}`, state: { reload: true } }} exact />
      );
    }
    if ((!isLogin && loading) || !isReady) {
      return <PageLoading />;
    }
    return <ValidDefaultPWDContainer>{children}</ValidDefaultPWDContainer>;
  }
}

const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  location: state.getIn(['router', 'location']).toJS(),
});
export default connect(
  mapStateToProps,
  null,
)(SecurityLayout);