Добавление времени ожидания сеанса на странице в Reactjs - PullRequest
Новая
       23

Добавление времени ожидания сеанса на странице в Reactjs

0 голосов
/ 26 апреля 2018

Я хочу добавить тайм-аут сеанса на мою страницу входа. За несколько секунд до истечения времени ожидания сеанса на странице должно появиться предупреждение о времени ожидания сеанса. После этого время сеанса должно истечь, и пользователь должен быть перенаправлен на начальную страницу. Пожалуйста, помогите мне сделать это. Это моя страница loginform.js 

    import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';
import { BrowserRouter as Router, Route } from "react-router-dom";

class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
       timeOut:false,
      warning:false,
    };
    this.onSubmit = this.onSubmit.bind(this);
  }


componentDidMount(){

    setTimeout(() => {
      this.setState({timeOut:true});
    },30000);//if 8sec is your warning time

    setTimeout(() => {
      this.setState({timeOut:true});
    },10000);//if 10sec is your time out
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;
     if(this.state.timeOut){
     return  <Route to="/Home" push={true} />
    }
    else{
    return (
      <form name="loginForm" onSubmit={this.onSubmit}>
        <div className="form-group-collection">
          <div className="form-group">
            <label>username:</label>
            <input type="username" name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
          </div>

          <div className="form-group">
            <label>Password:</label>
            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
          </div>
        </div>

        <input type="submit" value="Login" />

        <div className="message">
          { isLoginPending && <div>Please wait...</div> }
          { isLoginSuccess && <div>Success.</div> }
          { loginError && <div>{loginError.message}</div> }
        </div>
      </form>
    )
  }
}
  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}
const Home = () => (
  <div>
    <h2>Welcome Admin </h2>

  </div>
);

const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

экспорт подключения по умолчанию (mapStateToProps, mapDispatchToProps) (LoginForm); Это мой файл reducer.js 

const SET_LOGIN_PENDING = 'SET_LOGIN_PENDING';
const SET_LOGIN_SUCCESS = 'SET_LOGIN_SUCCESS';
const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR';

export function login(username, password) {
  return dispatch => {
    dispatch(setLoginPending(true));
    dispatch(setLoginSuccess(false));
    dispatch(setLoginError(null));

    callLoginApi(username, password, error => {
      dispatch(setLoginPending(false));
      if (!error) {
        dispatch(setLoginSuccess(true));
      } else {
        dispatch(setLoginError(error));
      }
    });
  }
}

function setLoginPending(isLoginPending) {
  return {
    type: SET_LOGIN_PENDING,
    isLoginPending
  };
}

function setLoginSuccess(isLoginSuccess) {
  return {
    type: SET_LOGIN_SUCCESS,
    isLoginSuccess
  };
}

function setLoginError(loginError) {
  return {
    type: SET_LOGIN_ERROR,
    loginError
  }
}

function callLoginApi(username, password, callback) {
  setTimeout(() => {
    if (username === 'admin' && password === 'password') {
      return callback(null);
    } else {
      return callback(new Error('Invalid username and password'));
    }
  }, 1000);
}

export default function reducer(state = {
  isLoginSuccess: false,
  isLoginPending: false,
  loginError: null
}, action) {
  switch (action.type) {
    case SET_LOGIN_PENDING:
      return Object.assign({}, state, {
        isLoginPending: action.isLoginPending
      });

    case SET_LOGIN_SUCCESS:
      return Object.assign({}, state, {
        isLoginSuccess: action.isLoginSuccess
      });

    case SET_LOGIN_ERROR:
      return Object.assign({}, state, {
        loginError: action.loginError
      });

    default:
      return state;
  }
}

Это мой store.js 

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import reducer from './reducer';

const store = createStore(reducer, {}, applyMiddleware(thunk, logger));
export default store;

Какие изменения необходимо внести, чтобы тайм-аут сеанса заработал?

1 Ответ

0 голосов
/ 26 апреля 2018

Очень хорошая лучшая практика - создать компонент высокого порядка, который вы можете дать каждому компоненту, для которого вы хотите иметь функцию тайм-аута.Очень похожий вопрос и решение изложено в следующей статье Stackoverflow: React-Timeout HOC

Они используют пакет React-Timeout , предоставленный plougsgaard: Реагировать-таймаута

...