使用vue-router访问经过身份验证的路由

Question

我一直在努力解决偶尔在我的VueJs2应用程序中出现的错误。

登录后我在我的应用程序中进行了身份验证，数据存储在Vuex中，然后点击链接时无法访问经过身份验证的路径。

问题出在登录时我的导航栏上的“个人资料”路线。如果我刷新浏览器然后它可以工作，我可以点击链接并查看组件。 问题出在beforeEach上，并且未能将Vuex认证为真。

这是我目前的路由器设置。

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