[Vuejs]-How to make middleware to finish asynchronous request to the server and commit to Vuex store before the page loads?

-1👍

Here you can read an example of authentication in Vue: https://scotch.io/tutorials/vue-authentication-and-route-handling-using-vue-router

Basically you can check authentication before letting user open the protected component. The easiest way to achieve this is using router guards. In your router definitions:

{
  path: '/proctected',
  beforeEnter(to, from, next) {
    if (isAuthenticated()) {
      next();
    } else {
      next('/page-to-show-for-unauthenticated-users');
    }
  }
}

This guard will protect from entering /proctected url. Here you can check the working codepen: https://codepen.io/anon/pen/JwxoMe

More about router guards: https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

Leave a comment