My code in App.Vue looks like this:
<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>
After logging into the system, I navigate to another page and refresh it. Upon reload, Vue.app executes the code above to validate the token stored in localStorage. However, before receiving a response from the server in the validateToken() function, other HTTP.GET requests are triggered in the mounted() function of the refreshed page. Is there a way for the validateToken() function to finish executing before the mounted() function on the other page is called?