问React js页面复制、粘贴和刷新id在服务器上不起作用，但在本地主机上起作用。

EN

 const loginform = (
        <div>
            {this.state.troubleClicked ? this.props.history.push("./troublelogin") : ''}
            {this.state.dormantClicked ? this.props.history.push("./reactivatedormant") : ''}

            <div>
                <div >
                    <TabBar ref="ltabs" tabs={this.state.loginTabs} highlight="below" highlightTextColor="login_tab_text" expanded={true} callbackHandler={this.onTabClicked.bind(this)} />
                </div>
                <input type="hidden" value="prayer" />
                <div style={{ marginTop: 20 }}>
                    <div className='icon_style'>
                        {/* <span className="fa fa-user-o login_icon "></span> */}
                        <img className="login_icon" src="assets/images/clientid2.png" alt="login"/>
                        <input autoComplete="none" value={this.state.userid} ref={(id) => { this.userNameRef = id; }}
                            onChange={this.onChange} onKeyPress={(e) => this.onKeyPress(e)} maxLength="12"
                            className="form-control login_formcontrol" type="text" name="userid" placeholder="Client ID"
                            onPaste={e=>e.preventDefault()}></input>
                    </div>
                    <div className='icon_style'>
                        {/* <span className="fa fa-briefcase login_icon "></span> */}
                        <img className="login_icon" src="assets/images/password2.png" alt="login"/>
                        <input autoComplete="off" type={"password"} value={this.state.password} ref={(id) => { this.passwordRef = id; }}
                            onChange={this.onChange} onKeyPress={(e) => this.onKeyPress(e)} maxLength="12"
                            className="form-control login_formcontrol" placeholder="Password" name="password"
                            onPaste={e=>e.preventDefault()}></input>
                    </div>
                    <div className='icon_style'>
                        {/* <span className="fa fa-id-card login_icon "></span> */}
                        <img className="login_icon" src="assets/images/pancard2.png" alt="login"/>
                        <input autoComplete="off" type={"password"} value={this.state.transactionpassword} ref={(id) => { this.transPasswordRef = id; }}
                            onChange={this.onChange} onKeyPress={(e) => this.onKeyPress(e)} maxLength="12"
                            className="form-control login_formcontrol" placeholder="PAN / TPIN / BIRTH YEAR / INCORPORATION YEAR" name="transactionpassword"
                            onPaste={e=>e.preventDefault()}></input>
                    </div>
                    {/* {this.state.isLoginFailed ? <div style={{ textAlign: 'left', color: 'red' }}><b>Sorry, Invalid credentials!</b></div> : ''} */}
                    <button type="button" className="form-control login_btn " onClick={this.startLogin}>LOGIN</button>
                    <div className='login_link'>
                        <a style={{ fontSize: 12, color: 'red' }}><button className='anchor_btn' onClick={() => this.onTroubleClicked()}>Trouble Logging In?</button></a>
                        <a style={{ fontSize: 12, color: 'blue' }}><button className='anchor_btn' onClick={() => this.onDormantClicked()}>Reactivate Dormant Account</button></a>
                    </div>
                    <div style={{ marginTop: 1, color: '#ccc' }}>By Logging In, You Agree to  <a className='anchor-link'><button type="button" className="aboutus-link btn-link" onClick={this.onClickTC}>Terms&Conditions</button></a></div>
                </div>
                <div>
                    <img style={{ height: "130px", width: "50%" }} src="assets/svg/ivl_ventures_logo.svg" alt="ivl logo"/>
                </div>
                {this.state.inProgress ? blockProgressBar() : ''}
            </div>
        </div>
    );
    return (
        <div>
            {this.state.loginStatus ? this.props.history.push("/home/dashboard") : loginform}
            <LoginTCDialog showDialog={this.state.showTCPopup} closeTCPopUp={this.onCloseTCPopUp.bind(this)} />
            <RiskDisclosureDialog showDialog={this.state.showRiskPopup} closeRDDPopUp={this.onCloseRiskPopUp.bind(this)} />
            <AdharVerificationDialog showDialog={this.state.showAdharPopup} closeAdharPopUp={this.onCloseAdharPopup} />
            {this.state.showchangepassword ?
                <ChangePassword
                    custommessage={this.state.changepasswordmessage}
                    onChangePasswordSuccess={this.onChangePasswordSuccess.bind(this)}
                    onCloseButtonClicked={this.onChangePasswordCloseClicked.bind(this)}
                    userid={this.state.userid} />
                :
                ''
            }
        </div>
    ); 

      "scripts": {
         "start": "react-scripts start --historyApiFallback=true"
       }

class PreLoginPage extends React.Component {

constructor(props) {
    super(props);
    //this.state = { loginStatus: this.props.loginStatus }
    this.state = {
        appversion: appReleaseVersion,
        configerror: false,
        inProgress: true
    }
}

componentDidMount() {
    this.setState({ inProgress: true }, () => {
        this.props.getConfig((iserror) => {
            this.setState({ configerror: iserror, inProgress: false });
        });
    });
}

createAccountClicked() {
    //this.props.history.push("./createaccount");
    window.open("https://eaccount.indiabulls.com/", "_blank");
}

logoClick(){
    window.open("http://indiabullsventures.com/shubh","_blank");
}

render() {
    // var progressindicator = (
    //     <div className="progress_block_background">

    //         <svg class="circular-progress" viewBox="25 25 50 50">
    //             <circle class="circular-progress_path" cx="50" cy="50" r="20"
    //                 fill="none" stroke-width="2" stroke-miterlimit="10" />
    //         </svg>

    //     </div>
    // );
    return (
        <div className='fillheight prelogin-bg'>
            <div className="row contentpanel prelogin-header-row">
                <div className="prelogin-header2 fillwidth">
                    <div className="prelogin-header-left">
                        <div className="prelogin-logo-holder">
                            <img src="assets/svg/india_bulls_logo.svg" onClick={this.logoClick.bind(this)} className="img-responsive pl-home-logo" alt="Indiabulls" style={{ marginLeft: '8px' }} />
                        </div>
                        <div className="prelogin-vdivider"> </div>
                        {/* <div className='pl-header-item'>
                            <div className='pl-small-text' >
                                <img src="assets/svg/bull.svg" style={{ width: '20px' }} /> Dial & Trade
                            </div>
                            <div className='pl-large-text' style={{ marginLeft: '20px' }} >
                                <span> {contactDetails.DIAL_AND_TRADE} </span>
                            </div>
                        </div> */}
                        <div className="prelogin-vdivider"> </div>
                        <div className='pl-header-item' >
                            <div className='pl-small-text'> <i className="fa fa-phone pl-header-icon" />Customer Care </div>
                            <div className='pl-large-text' style={{ marginLeft: '10px' }} >
                                <span data-toggle="tooltip" title="Open: 9:00 A.M. to 6:00 P.M. - Trading days"  > {contactDetails.CUSTOMER_CARE} </span>
                            </div>
                        </div>
                        <div className="prelogin-vdivider"> </div>
                        <div className='pl-header-item' >
                            <div className='pl-small-text'> <i className="fa fa-inbox pl-header-icon" />Email ID</div>
                            <div className='pl-large-text' style={{ marginLeft: '10px' }} >{contactDetails.HELPDESK_EMAIL}</div>
                        </div>
                    </div>
                    <div className="pl-header-item btnholder">
                        <div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="row contentpanel prelogin-content-row">
                <div className="prelogin-content2 fillwidth">
                    <div className="pl-content-parent2">
                        <div className="pl-content-holder2">
                            <div className='pl-poster2'>
                                <div id="loginCarousel" className="carousel slide" data-ride="carousel" data-interval="3000" style={{ height: "100%" }}>
                                    <ol className="carousel-indicators">
                                        <li href="#loginCarousel" data-slide-to="0" className="active"></li>
                                        <li href="#loginCarousel" data-slide-to="1"></li>
                                    </ol>
                                    <div className="carousel-inner" style={{ height: "100%" }}>
                                        <div className="carousel-item active" style={{ height: "100%" }}>
                                            <img src='assets/images/slider_1.JPG' style={{ height: "100%", width: "100%" }} alt="slider"/>
                                        </div>
                                        <div className="carousel-item" style={{ height: "100%" }}>
                                            <img src='assets/images/slider_3.JPG' style={{ height: "100%", width: "100%" }} alt="slider"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="login_mainholder2">

                                {this.state.inProgress || this.state.configerror ?
                                    <Loading inProgress={this.state.inProgress} configerror={this.state.configerror} />
                                    :
                                    <center>
                                        <div className="form-group login_form">
                                            <Switch>
                                                <Route path={`${this.props.match.path}/login`} exact component={LoginPage} />
                                                <Route path={`${this.props.match.path}/setpassword`} exact component={SetPasswordPage} />
                                                <Route path={`${this.props.match.path}/forgotpassword`} exact component={ForgotPasswordPage} />
                                                <Route path={`${this.props.match.path}/forgottpin`} exact component={ForgotTPINPage} />
                                                <Route path={`${this.props.match.path}/retriveclientid`} exact component={RetriveClientIdPage} />
                                                <Route path={`${this.props.match.path}/unlockaccount`} exact component={UnlockAccountPage} />
                                                <Route path={`${this.props.match.path}/troubleLogin`} exact component={TroubleLoggingIn} />
                                                {/* <Route path={`${this.props.match.path}/createaccount`} exact component={CreateAccountPage} /> */}
                                                <Route path={`${this.props.match.path}/reactivatedormant`} exact component={ReactivateDormant} />
                                                <Redirect to="/base/login" />
                                            </Switch>
                                        </div>
                                    </center>
                                }

                            </div>
                        </div>
                    </div>
                </div>
            </div>
    );
}
 }

  const mapStateToProps = (state) => {
return {

}
}


  const mapDispatchToProps = (dispatch, ownProps) => {
return {
    getConfig: (callback) => getConfig(dispatch, callback),
    watchListGroupAction: () => watchListGroupAction(dispatch),
};
};

 export default connect(mapStateToProps, mapDispatchToProps)(PreLoginPage);

    import React from 'react';


 class TroubleLoggingIn extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        form: 'forgotpassword',
        status: false,
    }
    }
     onButtonClick(e) {
        this.setState({ status: true, form: e.target.value });
     }
render() {
    const troubleform = (
        <div>
            <div style={{ marginTop: 20, color: '#000' }}>
                <div style={{ textAlign: 'left' }}>Trouble Logging In</div>
                <div style={{ textAlign: 'left', fontSize: 12, color: '#ccc' }}>We will help you to recover your ClientID or Password.
                       </div>
            </div>





            </div>
        </div>

    )
    return (
        <div className="fillheight">
            {this.state.status ? this.props.history.push("./" + this.state.form) : troubleform}
        </div>
    )
}

  }

   export default TroubleLoggingIn;

  import React from "react";
 import { connect } from "react-redux";
 import { submitLogin, setLoginStatus, afterSuccessLogin, afterFailedLogin,    submitLogout, setToLogout, setSessionCheck } from '../../../actions/login/submitLogin'
  import { getConfig } from '../../../actions/common'
  import { getItemByKey } from '../../../common/utils'
  import { localStorageKeys, ModuleKeys,ReleaseEnvironment } from '../../../common/constants'
  import { watchListGroupAction } from '../../../actions/watchlist/watchlistaction'
  import { isValidUserName, isValidLoginPassword, isValidLoginTPIN } from '../../../validators/loginValidations'
  import TabBar from "../../../controls/TabBar";
  import LoginTCDialog from '../../../controls/prelogin/LoginTermsAndCondition'
  import RiskDisclosureDialog from '../../../controls/prelogin/RiskDisclosurePopup'
 import AdharVerificationDialog from '../../../controls/prelogin/Adharverification'
import { showErrorDialog } from '../../../actions/orderentry/orderentryaction'
import ChangePassword from '../../../components/settings/ChangePassword'
import { setExpandWidget } from '../../../actions/dashboard'
import { blockProgressBar } from '../../../controls/progress'
import {loginWarning} from '../../../actions/login/submitLogin'

 class LoginPage extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        userid: '',
        password: '',
        transactionpassword: '',
        inProgress: false,
        loginTabs: ['SHUBH WEB'],
        selectedsegment: 'SHUBH WEB',
        showTCPopup: false,
        showRiskPopup: false,
        showAdharPopup: false,
        troubleClicked: false,
        dormantClicked: false,
        isLoginFailed: false,
        loginStatus: false,
        showchangepassword: false,
        changepasswordmessage: '',
    }
    this.onChange = this.onChange.bind(this);
    this.onKeyPress = this.onKeyPress.bind(this);
    this.setValue = this.setValue.bind(this);
    this.startLogin = this.startLogin.bind(this);
    this.onClickTC = this.onClickTC.bind(this);
    this.onCloseAdharPopup = this.onCloseAdharPopup.bind(this);
    this.onTroubleClicked = this.onTroubleClicked.bind(this);
    this.onDormantClicked = this.onDormantClicked.bind(this);
}


componentWillMount() {
    var status = getItemByKey(localStorageKeys.LOGIN_STATUS);
    if (status) {
        this.props.setLoginStatus();
        this.props.watchListGroupAction();
        this.setState({ loginStatus: true })
    } else {
        this.props.setLoginStatus(false);
    }
    //window.socketEvents.disconnect();
}

componentDidMount() {
    if (this.userNameRef)
        this.userNameRef.focus();

    console.log(this.props.tologout);
    if (this.props.tologout) {
        submitLogout();
        this.props.setToLogout(false);
    }

}

componentWillReceiveProps(nextProps) {
    if (nextProps.loginStatus !== this.state.loginStatus) {
        this.setState({ loginStatus: nextProps.loginStatus })
    }
}


setValue(key, value) {
    this.setState((state) => {
        let newValue = {}
        if(key === "userid"){
            newValue[key] = value.toUpperCase();
        } else {
            newValue[key] = value;
        }
        return Object.assign({}, state, newValue)
    })
}

onChange(e) {
    let { target: { name, value } } = e;
    this.setValue(name, value);
}

onKeyPress(e) {
    let { target: { name } } = e;
    if (e.key === 'Enter') {
        if (name === 'userid')
            this.passwordRef.focus();
        else if (name === 'password')
            this.transPasswordRef.focus();
        else if (name === 'transactionpassword')
            this.startLogin();
    }
}


startLogin() {
    var error;
    error = isValidUserName(this.state.userid)
    if (error !== '') {
        this.props.showErrorDialog({ header: "Error", message: error });
        return;
    }

    error = isValidLoginPassword(this.state.password);
    if (error !== '') {
        this.props.showErrorDialog({ header: "Error", message: error });
        return;
    }

    error = isValidLoginTPIN(this.state.transactionpassword);
    if (error !== '') {
        this.props.showErrorDialog({ header: "Error", message: error });
        return;
    }

    var panTpin = this.state.transactionpassword.toUpperCase();

    var requestData = {
        request: {
            data: {
                userid: this.state.userid,
                password: this.state.password,
                panTpin: panTpin
            }
        }
    }
    this.setState({ inProgress: true });
    submitLogin(requestData, this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
}

loginSuccessCallback(responseData) {
    console.log(responseData)
    this.setState({ inProgress: false });
    this.props.setSessionCheck();
    this.props.setExpandWidget(ModuleKeys.ALL);
    var accdet = (responseData.response.data.accountDetails);
    if(responseData.response.infoID === 'EGN011'){
        let warningData = {loginwarningMsg:responseData.response.infoMsg,showLoginWarningDialog:true,redirectLink:responseData.response.data.url}
        this.props.loginWarning(warningData);
    }
    else if (accdet.firstLogin) {
        this.setState({ showchangepassword: true, changepasswordmessage: 'Please set new Password', password: '', transactionpassword: '' });
    }
    else if (accdet.passwordExpired) {
        this.setState({ showchangepassword: true, changepasswordmessage: 'Your password is expired. Please set new Password.', password: '', transactionpassword: '' });
    }
    else if (accdet.passwordReset && accdet.passwordReset === "Y") {
        this.setState({ showchangepassword: true, changepasswordmessage: 'Please set new Password.', password: '', transactionpassword: '' });
    }
    else {
        this.props.afterSuccessLogin(responseData);
    }
}

loginFailedCallback(responseData) {
    this.setState({ inProgress: false, isLoginFailed: true, userid: '', password: '', transactionpassword: '' });
    this.props.afterFailedLogin({ header: "Error", message: responseData.message });
}

onChangePasswordSuccess() {
    this.setState({ showchangepassword: false });
}

onChangePasswordCloseClicked() {
    this.setState({ showchangepassword: false });
}

onTabClicked(tabName) {
    switch (tabName) {
        case "SHUBH WEB":
            this.setState({ selectedsegment: 'SHUBH WEB' });
            break;
        case "CLASSIC WEBSITE":
            //this.setState({ selectedsegment: "CLASSIC WEBSITE" });
            this.refs.ltabs.setActiveTab("SHUBH WEB");
            window.open("https://trade.indiabulls.com/login/login.htm", "_blank")
            break;
        default:break;
    }
}

onTroubleClicked() {
    console.log('trouble clicked');
    this.setState({ troubleClicked: true });
}

onDormantClicked() {
    console.log('dormant clicked');
    this.setState({ dormantClicked: true });
    //window.open("https://trade.indiabulls.com/dormant/reactivateClient.jsp", "_blank");
}
onCloseTCPopUp() {
    this.setState({ showTCPopup: false });
}

onCloseRiskPopUp() {
    this.setState({ showRiskPopup: false });
}

onCloseAdharPopup() {
    console.log("close adhar popup");
    this.setState({ showAdharPopup: false });
}
onClickTC() {
    this.setState({ showTCPopup: true });
    // this.setState({ showAdharPopup: true });
}
render() {
    // var progressindicator = (
    //     <div className="progress_block_background">

    //         <svg class="circular-progress" viewBox="25 25 50 50">
    //             <circle class="circular-progress_path" cx="50" cy="50" r="20"
    //                 fill="none" stroke-width="2" stroke-miterlimit="10" />
    //         </svg>

    //     </div>
    // );

    const loginform = (
        <div>
            {this.state.troubleClicked ? this.props.history.push("./troublelogin") : ''}
            {this.state.dormantClicked ? this.props.history.push("./reactivatedormant") : ''}

            <div>
                <div >
                    <TabBar ref="ltabs" tabs={this.state.loginTabs} highlight="below" highlightTextColor="login_tab_text" expanded={true} callbackHandler={this.onTabClicked.bind(this)} />
                </div>
                <input type="hidden" value="prayer" />
                <div style={{ marginTop: 20 }}>
                    <div className='icon_style'>
                        {/* <span className="fa fa-user-o login_icon "></span> */}
                        <img className="login_icon" src="assets/images/clientid2.png" alt="login"/>
                        <input autoComplete="none" value={this.state.userid} ref={(id) => { this.userNameRef = id; }}
                            onChange={this.onChange} onKeyPress={(e) => this.onKeyPress(e)} maxLength="12"
                            className="form-control login_formcontrol" type="text" name="userid" placeholder="Client ID"
                            onPaste={e=>e.preventDefault()}></input>
                    </div>
                    <div className='icon_style'>
                        {/* <span className="fa fa-briefcase login_icon "></span> */}
                        <img className="login_icon" src="assets/images/password2.png" alt="login"/>
                        <input autoComplete="off" type={"password"} value={this.state.password} ref={(id) => { this.passwordRef = id; }}
                            onChange={this.onChange} onKeyPress={(e) => this.onKeyPress(e)} maxLength="12"
                            className="form-control login_formcontrol" placeholder="Password" name="password"
                            onPaste={e=>e.preventDefault()}></input>
                    </div>
                    <div className='icon_style'>
                        {/* <span className="fa fa-id-card login_icon "></span> */}
                        <img className="login_icon" src="assets/images/pancard2.png" alt="login"/>
                        <input autoComplete="off" type={"password"} value={this.state.transactionpassword} ref={(id) => { this.transPasswordRef = id; }}
                            onChange={this.onChange} onKeyPress={(e) => this.onKeyPress(e)} maxLength="12"
                            className="form-control login_formcontrol" placeholder="PAN / TPIN / BIRTH YEAR / INCORPORATION YEAR" name="transactionpassword"
                            onPaste={e=>e.preventDefault()}></input>
                    </div>
                    <button type="button" className="form-control login_btn " onClick={this.startLogin}>LOGIN</button>
                    <div className='login_link'>
                        <a style={{ fontSize: 12, color: 'red' }}><button className='anchor_btn' onClick={() => this.onTroubleClicked()}>Trouble Logging In?</button></a>

                </div>
                <div>
                    <img style={{ height: "130px", width: "50%" }} src="assets/svg/ivl_ventures_logo.svg" alt="ivl logo"/>
                </div>
                {this.state.inProgress ? blockProgressBar() : ''}
            </div>
        </div>
    );
    return (
        <div>
            {this.state.loginStatus ? this.props.history.push("/home/dashboard") : loginform}
            <LoginTCDialog showDialog={this.state.showTCPopup} closeTCPopUp={this.onCloseTCPopUp.bind(this)} />
            <RiskDisclosureDialog showDialog={this.state.showRiskPopup} closeRDDPopUp={this.onCloseRiskPopUp.bind(this)} />
            <AdharVerificationDialog showDialog={this.state.showAdharPopup} closeAdharPopUp={this.onCloseAdharPopup} />
            {this.state.showchangepassword ?
                <ChangePassword
                    custommessage={this.state.changepasswordmessage}
                    onChangePasswordSuccess={this.onChangePasswordSuccess.bind(this)}
                    onCloseButtonClicked={this.onChangePasswordCloseClicked.bind(this)}
                    userid={this.state.userid} />
                :
                ''
            }
        </div>
      );
     };
   }

    const mapStateToProps = (state) => {
    console.log(state.loginStatus)
     return {
       loginStatus: state.loginStatus.status,
         tologout: state.loginStatus.tologout
    }
   }


  const mapDispatchToProps = (dispatch, ownProps) => {
      return {
       login: ({ userid, password, transactionpassword }) => submitLogin(dispatch),
    afterFailedLogin: (errordata) => afterFailedLogin(dispatch, errordata),
    afterSuccessLogin: (responseData) => afterSuccessLogin(dispatch, responseData),
    getConfig: () => getConfig(dispatch),
    setLoginStatus: (status) => setLoginStatus(dispatch, status),
    watchListGroupAction: () => watchListGroupAction(dispatch),
    showErrorDialog: (errordata) => showErrorDialog(dispatch, errordata),
    setToLogout: (tologout) => setToLogout(dispatch, tologout),
    setSessionCheck: () => setSessionCheck(dispatch, false),
    setExpandWidget: (activeWidget) => setExpandWidget(activeWidget, dispatch),
    loginWarning : (warningData) => loginWarning(dispatch,warningData)
};
 };

  export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);