Доступ к аутентифицированному маршруту с помощью vue-router

Question

Я боролся с ошибкой, которая иногда возникает в моем приложении VueJs2.

После того, как я вошел в систему, и я аутентифицировался в моем приложении, а данные сохранены в Vuex, я не могу получить доступ к аутентифицированному маршруту при нажатии нассылка.

Проблема связана с маршрутом «профиль», который находится на моей панели навигации при входе в систему. Если я обновляю браузер, он работает и я могу нажать на ссылку и просмотреть компонент.Проблема в beforeEach, и он не может аутентифицировать Vuex как true.

Это моя текущая настройка маршрутизатора.

import Vue from 'vue'
import VueRouter from 'vue-router'
import { store } from '../store/index'

import SiteIndex from '@/components/home/Index.vue'
import AuctionIndex from '@/components/auction/Index.vue'
import ViewVehicle from '@/components/vehicle/View.vue'
import Login from '@/components/authentication/Login.vue'
import Register from '@/components/registration/Register.vue'
import ForgotPassword from '@/components/authentication/Forgot.vue'
import Cart from '@/components/cart/Index.vue'

import UserProfile from '@/components/user/Profile.vue'
import AboutUs from '@/components/site/About.vue'
import Faq from '@/components/site/Faq.vue'
import HowItWorks from '@/components/site/HowItWorks.vue'
import ContactUs from '@/components/site/ContactUs.vue'
import Terms from '@/components/site/Terms.vue'

import Error404 from '@/components/site/Error404.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/index' },
    { path: '/logout', redirect: '/login' },
    {
        path: '/index',
        name: 'home',
        component: SiteIndex,
        meta: {
            breadcrumb: 'Home',
            displayBreadCrumb:false
        }
    },
    {
        path: '/auction',
        name: 'auction',
        component: AuctionIndex,
        meta: {
            breadcrumb: {
                label: 'Auction',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/auction/:slug/:vehicle_id',
        component: ViewVehicle,
        meta: {
            displayBreadCrumb:true
        }
    },
    {
        path: '/cart',
        component: Cart,
        meta: {
            requiresAuth: true,
            breadcrumb: {
                label: 'Basket',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/login',
        component: Login,
        meta: {
            breadcrumb: {
                label: 'Login',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/register',
        component: Register,
        meta: {
            breadcrumb: {
                label: 'Register',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/forgot',
        component: ForgotPassword,
        meta: {
            breadcrumb: {
                label: 'Forgot Password',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/profile',
        component: UserProfile,
        meta: {
            requiresAuth: true,
            breadcrumb: {
                label: 'My Profile',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/terms',
        component: Terms,
        meta: {
            breadcrumb: {
                label: 'Terms and conditions',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/howitworks',
        component: HowItWorks,
        meta: {
            breadcrumb: {
                label: 'How it works',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/faq',
        component: Faq,
        meta: {
            breadcrumb: {
                label: 'Frequently asked questions',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/about',
        component: AboutUs,
        meta: {
            breadcrumb: {
                label: 'About us',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '/contactus',
        component: ContactUs,
        meta: {
            breadcrumb: {
                label: 'Contact us',
                parent: 'home'
            },
            displayBreadCrumb:true
        }
    },
    {
        path: '*',
        component: Error404
    }
  ],
  linkActiveClass: 'active',
  mode: 'history'
})
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if(requiresAuth && !store.getters.isLoggedIn) {
    next('/login');
  } else {
    next();
  }
})

export default router