У меня есть требование для отображения предупреждения о тайм-ауте после 13 минут бездействия и окончания сеанса через 15 минут, если пользователь не предпринимает никаких действий. Мне нужно добиться этого с помощью реакции. Я проверил время реакции на https://www.npmjs.com/package/react-timeout#react-classic-verbose, но это не помогло. Если кто-нибудь знает способ сделать это, пожалуйста, поделитесь со мной.Модифицирование таймаута сеанса с использованием реакции
ответ
Вы можете создать более высокий компонент порядка, как это и может передать ребенка компоненту через компонент высшего порядка
HOC:
`// Код
export default function(ComposedClass) {
class AutoLogout extends React.Component {
constructor(props) {
super(props);
this.state = {
warningTime: 1000 * 60 * 10,
signoutTime: 1000 * 60 * 15,
};
}
componentDidMount() {
this.events = [
'load',
'mousemove',
'mousedown',
'click',
'scroll',
'keypress'
];
for (var i in this.events) {
window.addEventListener(this.events[i], this.resetTimeout);
}
this.setTimeout();
}
clearTimeoutFunc =() => {
if (this.warnTimeout) clearTimeout(this.warnTimeout);
if (this.logoutTimeout) clearTimeout(this.logoutTimeout);
};
setTimeout =() => {
this.warnTimeout = setTimeout(this.warn, this.state.warningTime);
this.logoutTimeout = setTimeout(this.logout, this.state.signoutTime);
};
resetTimeout =() => {
this.clearTimeoutFunc();
this.setTimeout();
};
warn =() => {
window.alert("You will be logged out automatically in 1 minute")
console.log('You will be logged out automatically in 1 minute.');
};
logout =() => {
// Send a logout request to the API
console.log('Sending a logout request to the API...');
this.destroy();
};
destroy =() => {
//clear the session
browserHistory.push('/');
window.location.assign('/');
};
render() {
return (
<div>
<ComposedClass {...this.props} />
</div>
);
}
}
}
`
Вы можете оберните этот HOC ко всем тем компонентам, в которых вы хотите дать предупреждение пользователю из-за неактивности, в файле маршрутизации
<Route path="/test" component={HOC(comonent)} />
В этом компоненте кода будет страница, где вы хотите добавить эту функциональность.
Спасибо за ответ @Anshul Jain. Это был старый вопрос, и я больше не работаю над этим. Но, спасибо за такой продуманный ответ. – abhi
Спасибо, что спасли мой день. Так держать. –
Сверху моей головы, почему бы не определить свойство 'active' в' 'состоянии компонента. Установите тайм-аут через 'setTimeout', чтобы установить' active' в 'false' после 13 минут бездействия. Каждый раз, когда пользователь перемещает мышь/касается экрана, сброс таймаута. В главном компоненте приложения вы можете сделать что-то подобное, чтобы завершить сеанс. –