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

有几种方法可以做到这一点，但是我可能会使用插件来解决这个问题，因为计时器不应该在商店中，并且行为对于应用程序是全局的，因此我不会将其放入任何单个组件中

该Pugin将在该存储区的已登录标志上具有一个vuex.watch。从false => true开始，请删除计时器（如果已启用），如果从false => true开始，请添加计时器。然后，计时器函数可以调用vuex调度程序来处理该功能。