VueJS периодически проверять глобальную функцию

Question

У меня есть VueJS проект, в котором мне нужно периодически проверять функцию, чтобы увидеть, истек ли токен после успешного входа пользователя в приложение и если токен истек, должен показывать модальныйсообщение пользователю.

У меня есть файл Singin.vue, который содержит следующий код:

....
 methods: {
    ...mapActions(['authorize']),
    submit() {
      this.$validator.validateAll().then(result => {
        if (result) {
          this.error = null;
          this.processing = true;
          this.authorize(this.credentials).then(() => {

            // ***********
            // HERE I have to check periodically if the token has expired
            // ***********

            this.$router.push({name: 'home'});
          }).catch(error => {
            console.warn('error message', error);
            this.error = error.response.data.message;
            this.processing = false;
          });
        }
      });
    }

Когда происходит this.authorize, я направляюсь домой, но перед этим мне нужно начатьпериодически вызывая функцию.Затем, если пользователь выйдет из системы, я должен очистить интервал.

Итак, во-первых, я не знаю, где лучше всего разместить этот код функции TokenExpiration.Имеет ли смысл хранить его в файле хранилища?

Это мой файл хранилища api.js, в котором есть моя функция authorize и моя функция logout, имеет ли смысл иметь tokenExpirationCheck здесь тоже функционировать?

Цените любые рекомендации по передовому опыту.

Answer 1

Есть несколько способов сделать это, но я бы, вероятно, решил это с помощью плагина, потому что таймеры не должны быть в хранилище, а поведение является глобальным для приложения, поэтому я бы не стал помещать его в какой-либо один компонент.

Пугин будет иметь vuex.watch на флаге входа в магазин.Когда он идет от false => true, удалите таймер (если он активен) и, если он идет от false => true, добавьте таймер.Затем функция таймера может вызвать диспетчер vuex для обработки функциональности.