Vuejs路由器导航守卫在第一次请求时工作，第二次忽略

Question

（我是 Vue 新手） 我在我的路由器上实现了一个导航保护，它在从另一条路线导航时工作。守卫将用户导航到拒绝访问页面。此时导航菜单仍然从拒绝访问页面可见，这意味着用户可以尝试再次加载他们被拒绝访问的页面。如果用户确实尝试这样做，他们之前被拒绝访问的页面会加载，我想阻止这种情况发生。似乎以某种方式绕过了警卫？

谢谢

if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
next({name: 'login'});

} else if (to.matched.some(record => record.meta.roles)) {

var userRoles = JSON.parse(loggedIn).roles;
to.meta.roles.forEach(function (role) {
  if (userRoles.includes(role))
    next();
});  
  next({ name:'accessdenied'});    
}

路由器入口：-

{
path: '/pageA',
name: 'pageA',
component: pageA,
meta: { requiresAuth: true, roles: ['role1', 'role2'] },
beforeEnter(routeTo, routeFrom, next) {
  store.dispatch('fetchSomeData').then(() => {
    next()
  })
}

导航条目：-

<router-link :to="{name: 'pageA'}">
            <h1 class="mb-0 h5 ml-4 z-app-header-title">Page A</h1>
 </router-link>

Answer 1

要正确保护路线，请使用类似的东西

{
path: '/pageA',
name: 'pageA',
component: pageA,
meta: { requiresAuth: true, roles: ['role1', 'role2'] },
beforeEnter(routeTo, routeFrom, next) {
  if(!store.getters.loggedIn) next({name: 'login'});
  else if(!routeTo.meta.roles.includes(store.getters.userRole)) next({name: 'accessdenied
'});
  else next();
}

要保护所有路线 - 使用类似的东西

router.beforeEach((to, from, next) =>
{
  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) next({name: 'login'});

  else if (to.meta.roles)
  {
    const userRole = JSON.parse(loggedIn).role; // the role of the current user
    if(to.meta.roles.includes(userRole)) next();
    else next({ name:'accessdenied'});    
  }
  else next();
});