在 Reactjs 的页面中添加会话超时

Posted 2023-02-22

【中文标题】在 Reactjs 的页面中添加会话超时

【英文标题】：Adding session timeout in a page in Reactjs

【发布时间】：2018-10-06 17:59:07

【问题描述】：

我想在我的登录页面中添加会话超时。在会话超时前几秒钟，页面应显示会话超时警报。之后会话应该超时，用户应该被重定向到初始页面。请帮助我做到这一点。 这是我的 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】：

一个非常好的最佳实践是创建一个高阶组件，您可以为每个组件提供您想要的超时功能。以下 *** 帖子中发布了一个非常相似的问题和解决方案：React-Timeout HOC

他们正在使用 plougsgaard 提供的 React-Timeout 包：React-Timeout

【讨论】：

不！ - reactjs 和 react-native 的组件。两个框架都可以完成高阶组件。所以它适用于您的用例