Vuex Route Guard DEMO

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import plugins from './plugins';

plugins({
  router, store, Vue,
});

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

plugins-auth.js

const needAuth = (route) => {
  const { requiresAuth } = route.meta;

  if (requiresAuth === undefined) {
    return true;
  }

  return requiresAuth;
};

const install = ({
  store, router,
}) => {
  router.beforeEach((to, from, next) => {
    if (!needAuth(to)) {
      next();
      return;
    }

    store.dispatch('auth/checkUser')
      .then(() => {
        next();
      })
      .catch((e) => {
        console.warn(e);
        next({ name: 'Login' });
      });
  });
};


export default install;

plugins-index.js

import auth from './auth';

const install = (options) => {
  [auth].forEach((plugin) => {
    plugin(options);
  });
};

export default install;

router.js

import Vue from 'vue';
import Router from 'vue-router';
import routes from './routes';

Vue.use(Router);

export default new Router({
  base: process.env.BASE_URL,
  routes,
});