ログインページにセッションタイムアウトを追加したい。セッションがタイムアウトする数秒前に、ページにセッションタイムアウトアラートが表示されます。その後、セッションがタイムアウトになり、ユーザーは最初のページにリダイレクトされます。私がこれをするのを手伝ってください。これは私の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))
};
}
デフォルトのconnect(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;
セッションタイムアウトを機能させるために必要な変更は何ですか?
非常に優れたベストプラクティスは、タイムアウト機能を持たせたいすべてのコンポーネントに与えることができる高次コンポーネントを作成することです。非常によく似た質問と解決策は、次のStackoverflow投稿のpostetです: React-Timeout HOC
彼らはplougsgaardが提供するReact-Timeoutパッケージを使用しています: React-Timeout