Как решить проблему с реализацией проверки логина с использованием setInterval после перезагрузки страницы?

Question

[Andy Koshman]

Всем привет! Пожалуйста, объясните, как правильно реализовать проверку логина в функции checkLogin() с интервалом в 3 секунды (будет час). Проблема заключается в том, что при вызове setInterval функции checkLogin(), после перезагрузки страницы она перестает работать из-за того, что родительская функция getAuthentication() уже не запускается. Это происходит потому, что вход в систему осуществляется через одноименную функцию только один раз. Как бы вы реализовали эту задачу?
Вот код:

<template>
    <div>
        <BaseButton @click.prevent="getAuthentification">Entry</BaseButton>
    </div>
</template>
<script setup >
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import axios from 'axios';

  const currentDomain = window.location.origin;

  const router = useRouter();

  const getAuthURL = `${currentDomain}/Login`;
  const checkLoginURL = `${currentDomain}/CheckLogin`;

  const checkLogin = async () => {

    try {
      const response = await axios.get(checkLoginURL);

      if (response.data.result) {
        console.log('result: ', response.data.result);
        return response.data.result;
      }
    } catch (error) {
      if (error.response && error.response.status === 422) {

        router.push('/Admin'); //Страница ввода логин/пароль

        const errorMessages = error.response.data.errors;
        checkLoginErrorMessages.value.push(errorMessages.Login.join(''));

      }
    }
  }

  const getAuthentification = async () => {

      try {
        const response = await axios.post(getAuthURL, authenticationObj);

        if (response.request.status === 200) {

          router.push('/ApplicationList'); //страница админки

          setInterval(async () => {
            await checkLogin();
          }, 3000); //нужно запускать каждые 3 секунды пока response.request.status === 200
        }

        authenticationFields.value.forEach(field => {
          field.errorMessages = [];
        });

      } catch (error) {
        console.log(error)
      }
    }

  </script>

Comments

[Антон Антон]

я бы не долбил в бэкэнд кучей запросов.

кажется, задача какая-то другая, и выбранный метод решения её не очень подходит

[Andy Koshman]

Антон Антон, Как бэк сказал, проверка логина checkLogin() должна происходить раз в 1 час (3 секунды это условность). По истечению времени, я так понимаю, он у себя определяет пользователь залогинен пользователь или нет. А вообще вот что бэк пишет: "Ты делаешь проверку каждый час, если пользователь авторизован то сбрасываешь таймер, если нет то переводишь на страницу авторизации".

[Евгений Пономарев]

Как вариант - Запишите время в localstorage или куки. И проверяйте на каждом хите или в условном middleware для страниц админки, если такое есть, прошел ли час, если прошел вызывайте нужную функцию для проверки авторизации.

Наверное setinterval тут не нужен.

[Alex D]

Andy Koshman, обычно проверка на checkLogin происходит в момент логина или в момент перезагрузки приложения. Зачем там таймерами долбить в бэк вообще не понятно. Если время токена авторизации вышло, ну и выбрасывайте его на страницу входа в чем проблема. Направление https://www.youtube.com/watch?v=059fh7Gobho

[Andy Koshman]

Alex D, Проблема в том, что бэк говорит, какой я молодец, и в целом правильно делаю. По его замыслу, я должен через час после авторизации вызвать ф-ю checkLogin:

if(response.request.status === 200) {   
   router.push('/ApplicationList');
   performChecking();     
}

вот сама функция, в которой через час вызывается checkLogin:

const performChecking = () => {
        const savedTime = new Date().getTime();
        localStorage.setItem('loginTime', savedTime);

        setInterval(async () => {
            if (!continueChecking) {  
                return;
            }

            const currentTime = new Date().getTime();
            const elapsedTime = currentTime - savedTime;

            if (elapsedTime >=  3600000) {
                await checkLogin();
            } 
        }, 3600000);
    }

При ручном удалении сессии и токена отрабатывает 422 ответ у checkLogin, то есть час прошел, и сервер решил, что пользователь не активен, выбрасывает его на страницу авторизации. Вы пишете: "Если время токена авторизации вышло, ну и выбрасывайте его на страницу входа". Я в целом это и пытаюсь реализовать, но если делать по-другому, то я не знаю, как отловить просрочку авторизации. Логично же, сделать запрос на проверку авторизации await axios.get(checkLoginURL) в функции checkLogin и на основании ответа выкидывать пользователя или нет.

[Alex D]

Andy Koshman, я не понимаю логику делать это в реактивном приложении. Если приложение загружено то оно загружено, а проверять активность можно во время загрузки/перезагрузки когда проверяется сам статус авторизации. И если время последней активности, в момент загрузки приложения больше часа, то разлогинивать.

то я не знаю, как отловить просрочку авторизации

Почему бы не стрелять в LocalStorage а не в бд. В LocalStorage обновлять время взаимодействия с сервером и по нему сверять. ну или с кукой. Короче стучать по базе каждый раз, такое себе.

[Andy Koshman]

Alex D, А является ли следующий вариант нормальным? На бэке, при авторизации, создать куку, которая будет сохраняться, а затем на клиенте её перехватить. При разлогинивании на бэке обновить или удалить куку, а на клиенте отследить изменение. Если да, то выполнить редирект. В целом мне кажется вы это и имели в виду:

В LocalStorage обновлять время взаимодействия с сервером и по нему сверять. ну или с кукой.

[Alex D]

Andy Koshman, ну так это классика, обычно так и происходит.

Answer 1

[Andy Koshman]

Задача решена. В целом, поигрался с компонентами и нашел костыльное решение.