index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Store from '@/store/index';
import APISetting from '@/settings/api';
import Login from '@/views/Login.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
  },
  {
    path: '/main',
    name: 'Main',
    component: () => import('@/views/Main.vue'),
  },
  {
    path: '/program',
    name: 'ProgramList',
    component: () => import('@/views/ProgramList.vue'),
  },
  {
    path: '/program/create',
    name: 'ProgramCreate',
    component: () => import('@/views/ProgramCreate.vue'),
  },
  {
    path: '/program/:id',
    name: 'ProgramDetail',
    component: () => import('@/views/ProgramDetail.vue'),
  },
  {
    path: '/schedule',
    name: 'ScheduleList',
    component: () => import('@/views/ScheduleList.vue'),
  },
  {
    path: '/schedule/create',
    name: 'ScheduleCreate',
    component: () => import('../views/ScheduleCreate.vue'),
  },
  {
    path: '/schedule/:id',
    name: 'ScheduleDetail',
    component: () => import('@/views/ScheduleDetail.vue'),
  },
  {
    path: '/trainee',
    name: 'TraineeList',
    component: () => import('@/views/TraineeList.vue'),
  },
  {
    path: '/trainee/create',
    name: 'TraineeCreate',
    component: () => import('@/views/TraineeCreate.vue'),
  },
  {
    path: '/trainee/:id',
    name: 'TraineeDetail',
    component: () => import('@/views/TraineeDetail.vue'),
  },
  {
    path: '/trainer',
    name: 'TrainerList',
    component: () => import('@/views/TrainerList.vue'),
  },
  {
    path: '/trainer/:id',
    name: 'TrainerDetail',
    component: () => import('@/views/TrainerDetail.vue'),
  },
  {
    path: '/voucher',
    name: 'VoucherList',
    component: () => import('@/views/VoucherList.vue'),
  },
  {
    path: '/voucher/create',
    name: 'VoucherCreate',
    component: () => import('@/views/VoucherCreate.vue'),
  },
  {
    path: '/voucher/:id',
    name: 'VoucherDetail',
    component: () => import('@/views/VoucherDetail.vue'),
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach(async (to, from, next) => {
  Store.commit('setPageStartLoading');

  const res = await fetch(APISetting.endpoints.auth.check, APISetting.settings.get);
  if (res.status === 200) {
    const json = await res.json();
    Store.commit('setLogin', json.user);
  } else {
    Store.commit('setLogout');
  }

  next();
});

router.afterEach(() => {
  Store.commit('setPageFinishLoading');
});

export default router;