Как разработать время ожидания на основе сеанса на React.js

Автор оригинала: James Ugbanu.

Что такое сессия Сеанс – продолжительность времени, когда пользователь взаимодействует или выполняет действия с приложением. Например: когда пользователь открывает почту Google и войти, чтобы просмотреть его электронную почту, а после завершения деятельности он выходит из системы. Время между логином и выбором – это сеанс. В этом руководстве я собираюсь взять вас через то, как разработать время ожидания на основе сеанса в Rect.js.

Зачем использовать тайм-аут сеанса Тайм-аут сеанса, как правило, используется из-за причин безопасности в веб-приложении. Чтобы избежать ненужных вызовов API или неправильное использование информации о пользователе. Веб-приложения всегда уязвимы для атаки безопасности. Итак, чем дольше пользователь простаивает, чем больше шансов для хакеров ввести вредоносных кода. Иногда, если есть вызов API на регулярном интервале, чтобы получить обновленную информацию. Не нужно было бы назвать API, если пользователь простаивается. Чтобы начать мы должны получить стартовый код в https://github.com/jamesugbanu/reacub-session-timeout-starter

Шаг 1: клонировать репо

Выполните NPM Установите для установки всех необходимых зависимостей. Запустите NPM Start, перейдите в браузер и убедитесь, что стартер выглядит как ниже. Не волнуйтесь, если вы не можете получить приложение стартера, вы всегда можете отправить мне письмо.

Для тех, кто смог договориться. Отличная работа

Далее мы устанавливаем два (2) компонента, SessionTimeout.js и sessiontimeoutdialog.js. Прежде чем мы это сделаем, я хочу объяснить, что делает каждую каждую зависимость.

@ Материал-ui/Core используется для UI Design CLSX используется для объединения CSS и, наконец, мы будем использовать зависимость отслеживания, когда пользователь простаивает.

NPM Установить racted-timer – Сохранить для установки

Создайте файл с именем SessionTimeout.js и sessiontimeoutdialog.js в вашей папке SRC.

SessionTimeoutDialog будет размещать диалоговое окно компонента сеанса. Sessiontimeoutdialog.js должен выглядеть ниже. Вы можете стимулировать его, чтобы удовлетворить ваш дизайн приложения. Sessiontimeoutdialog.js.

import React from "react";
import {
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Button,
Typography,
makeStyles,
Slide
} from "@material-ui/core";
import clsx from "clsx";
import red from "@material-ui/core/colors/red";
const useStyles = makeStyles(() => ({
dialog: {
borderRadius: 0
},
button: {
borderRadius: 0,
textTransform: "none",
padding: 5
},
logout: {
color: "#fff",
backgroundColor: red[500],
"&:hover": {
backgroundColor: red[700]
}
},
countdown: {
color: red[700]
}
}));
const Transition = React.forwardRef(function Transition(props, ref) {
return ;
});
const SessionTimeoutDialog = ({  open, countdown, onLogout,onContinue }) => {
const classes = useStyles();
return (


Session Timeout



The current session is about to expire in{" "}
{countdown} seconds.

{`Would you like to continue the session?`}



Logout


Continue Session



);
}
export default SessionTimeoutDialog;

Теперь мы можем продолжить функциональность тайм-аута сеанса. Если вы не понимаете, как работает материал-интерфейс, вы можете прочитать здесь https://material-ui.com/. Кроме того, этот учебник ожидает, что вы должны быть знакомы с React Clooths https://reactjs.org/docs/hooks-intro.html

Внутри SessionTimeout.js мы хотим создать некоторые функции, такие как ClearsessimeOut, ClearsessiverInterival, HandleLogout, HandleContinue, OniCacty и Onidle.

ClearsessionTimeout Как указано имя, это очистить/сбросить сеанс ClearsessionInterval Сброс интервала времени, используемый для таймера обратного отсчета HandleLogout журналы пользователей выходят. Handlecontinue позволяет пользователю продолжить работу с сеансом. ОДНАКТИМЬ Очищает SessionTimeout и ClearSessionInterval, когда активно активен диалоговое окно Timeout Session. Onidle Откроется диалоговое окно сеанса и установленного интервала времени

SessionTimeout.js.

import React, { useRef, useState } from "react";
import IdleTimer from "react-idle-timer";
import SessionTimeoutDialog from "./SessionTimeoutDialog";
let countdownInterval;
let timeout;
const SessionTimeout = ({isAuthenticated, logOut}) => {
const [timeoutModalOpen, setTimeoutModalOpen] = useState(false);
const [timeoutCountdown, setTimeoutCountdown] = useState(0);
const idleTimer = useRef(null);
const clearSessionTimeout = () => {
clearTimeout(timeout);
};
const clearSessionInterval = () => {
clearInterval(countdownInterval);
};
const handleLogout = async (isTimedOut = false) => {
try {
setTimeoutModalOpen(false);
clearSessionInterval();
clearSessionTimeout();
logOut();
} catch (err) {
console.error(err);
}
};
const handleContinue = () => {
setTimeoutModalOpen(false);
clearSessionInterval();
clearSessionTimeout();
};
const onActive = () => {
if (!timeoutModalOpen) {
clearSessionInterval();
clearSessionTimeout();
}
};
const onIdle = () => {
const delay = 1000 * 1;
if (isAuthenticated && !timeoutModalOpen) {
timeout = setTimeout(() => {
let countDown = 10;
setTimeoutModalOpen(true);
setTimeoutCountdown(countDown);
countdownInterval = setInterval(() => {
if (countDown > 0) {
setTimeoutCountdown(--countDown);
} else {
handleLogout(true);
}
}, 1000);
}, delay);
}
};
return (
<>

 handleLogout(false)}
open={timeoutModalOpen}
/>

);
}
export default SessionTimeout;

Теперь у нас есть SessionTimeoutDialog и SessionTimeout Setup. Теперь мы импортируем компонент SessionTimeout, затем пропустите ISAuthentific State и функцию HandleClick как реквизиты.

App.js.

import React, { useState } from 'react';
import {
Container,
Box,
Button,
makeStyles
} from '@material-ui/core';
import logo from './logo.svg'
import SessionTimeout from './SessionTimeout';
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
flexDirection: 'column',
minHeight: '100vh'
},
cardContainer: {
paddingBottom: 80,
paddingTop: 80,
},
}));
const LoginButton = (props) => {
return (

Log In

);
}
const LogoutButton = (props) => {
return (

Logout

);
}
const App = () => {
const classes = useStyles();
const [isAuthenticated, setAuth] = useState(false);
let button;
const handleClick = () => {
setAuth(!isAuthenticated);
}
if (isAuthenticated) {
button = ;
} else {
button = ;
}
return (








{button}




);
}
export default App;

Итак, что мы здесь сделали, мы установили время простоя до 5 секунд и время предупреждения до 10 секунд до того, как он выходит в систему. Всякий раз, когда пользователь нет активности в течение 5 секунд, он всплывает диалоговое окно с обратным отсчетом таймера 10 секунд. И автоматически пользователь выходит через интервал на 10 секунд.

Это полный код по адресу – https://github.com/jamesugbanu/reacub-session-timeout Спасибо за чтение и не стесняйтесь задать любой вопрос, если у вас есть какие-либо. здесь…