Async/await not actually WAITING (vue)

So I had a login functionality where I was dispatching a login action and after the action, I was pushing the router to the home page.

The action makes a post request to the API and commits a mutation that adds the token to the session if successful.

I made my method that handles the form submission asynchronous and my thinking was whenever I dispatch the action, it will authenticate the user and store the token but I kept facing a problem where the home page was pushing the router back to the login page. Meaning, by the time we push the router to the home page, the user is still not authenticated.

method to handle login

This was happening because I set my router to check whether there is a token in the session whenever the router changes and so the two pages kept clashing. The login page pushes the router to the home page and the home page pushes it back to the router because it could not find the token.

The problem turned out to be in the action.

vuex action

What was happening was whenever the action was triggered since actions are asynchronous and Axios returns a promise, the only way to know when it's done executing is to return the…