Question

在App.Vue中，我有以下代码：

<script>
import axios from "axios";
import { baseApiUrl, userInfo } from "@/global";

export default {
  methods: {
    moveToLoginPage() {
      localStorage.removeItem(userInfo);
      this.$store.commit("setToken", null);
      this.$router.push({ path: "/login" });
    },
    async validateToken() {
      const json = localStorage.getItem(userInfo);
      const userData = JSON.parse(json);
      if (!userData) {
        this.moveToLoginPage();
      } else {
        const url = `${baseApiUrl}/auth/validateToken`;
        const resData = await axios.post(url, userData).then(resp => resp.data);
        if (!resData) {
          this.moveToLoginPage();
        }
      }
    }
  },
  created() {
    this.validateToken();
  }
};
</script>

访问系统后，我转到任何其他页面，并进行刷新。重新加载页面后，将执行Vue.app中的此代码段以验证localStorage中的令牌。但是在我通过validateToken（）函数从服务器获得响应之前，其他HTTP.GET请求将在我在函数mount（）中刷新的页面中执行。我希望validateToken（）函数在另一页的mount（）函数执行之前完全执行。

Answer 1

您可以像这样使用async/await：

async created(){
    await this.validateToken();
    }

这将阻止创建生命周期挂钩完成，直到validateToken返回响应为止

Answer 2

我假设您的App.vue文件中有一个router-view。您可以为异步数据保留一个标志/变量，然后仅在该数据可用时才加载router-view。

<template>
  <router-view v-if="data"></router-view>
</template>

这样，在异步数据可用之前，您的内部子项甚至都不会加载。

这个答案与我对上述问题的评论相同，只是为了将来的人们。

Vue刷新页面执行多个axios.post

2 个答案: