router

router/index.js

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store';

import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'
import RegisterView from '../views/RegisterView.vue'
import ProfileView from '../views/ProfileView.vue'
import WriteMyLogView from '../views/WriteMyLogView.vue'
import EditMyLogView from '../views/EditMyLogView.vue'

import MyMyLogsView from '../views/MyMyLogsView.vue'
import MyLogView from '../views/MyLogView.vue'
import UserMyLogsView from '../views/UserMyLogsView.vue'
import SearchMyLogsView from '../views/SearchMyLogsView.vue'
import SubscriptionsView from '../views/SubscriptionsView.vue'
import ReadersView from '../views/ReadersView.vue'
import NotificationView from '../views/NotificationView.vue'
import ManageView from '../views/ManageView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/register',
    name: 'register',
    component: RegisterView
  },
  {
    path: '/profile',
    name: 'profile',
    component: ProfileView,
    meta: { requiresAuth: true }
  },
  {
    path: '/write',
    name: 'write',
    component: WriteMyLogView,
    meta: { requiresAuth: true }
  },
  { 
    path: '/mylog/:id', 
    name: 'mylog', 
    component: MyLogView
  },
  {
    path: '/mylog/edit/:mylog',
    name: 'edit',
    component: EditMyLogView,
    props: true,
  },  
  {
    path: '/mylogs',
    name: 'mylogs',
    component: MyMyLogsView,
    meta: { requiresAuth: true }
  },
  {
    path: '/userlogs/:userId',
    name: 'userlogs',
    component: UserMyLogsView
  },
  {
    path: '/search',
    name: 'search',
    component: SearchMyLogsView
  },
  {
    path: '/subscribing',
    name: 'subscribing',
    component: SubscriptionsView,
    meta: { requiresAuth: true }
  },
  {
    path: '/subscriber',
    name: 'subscriber',
    component: ReadersView,
    meta: { requiresAuth: true }
  },
  {
    path: '/notification',
    name: 'notification',
    component: NotificationView,
    meta: { requiresAuth: true }
  },
  {
    path: '/manage',
    name: 'manage',
    component: ManageView,
    meta: { requiresAuth: true  }
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

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

router.beforeEach((to, from, next) => {

  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const user = store.state.auth.user;

  if (requiresAuth && !user) {
    next('/login');
  } else {
    next();
  }
});

export default router