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();
});

Vuejs路由器导航卫士处理第一个请求，而忽略第二次

1 个答案: