Question

在我目前使用的Vue App的进展中，我已经成功使用Vuex将导航栏隐藏给来宾用户，但是我仍然遇到问题，因为如果手动输入URL，我仍然可以导航他们。

我已经在互联网上搜索了代码/教程，但是其中一些令人困惑，或者因为我对此还不陌生，所以我根本不理解。因此，我尝试将自己的代码编写在全局警戒中。

这是我的代码：

router.beforeEach((to, from, next) => {  
  var auth = localStorage.getItem("UserToken")
  if (auth !== null && to.path === '/') {
    next(false)
  }else if(auth === null && to.path === '*'){
    next('/')
  }
  else {
    next()
  }
})

第一个条件成功，已登录的用户无法返回登录页面。

第二个条件没有任何错误，但是访客仍然可以浏览我的页面

Answer 1

您希望访客用户访问哪条路线？我假设使用/路线（主页）？

您需要将第二个if条件更改为：

else if (auth === null && to.path !== '/')

含义如果用户是访客，并且他们正尝试导航到非首页路线。

我发现与其匹配可能包含动态参数的路径，不如匹配一个恒定的路由名称。您可以为每个路线指定这样的名称：

{
  name: 'home',
  path: '/',
  component: ...
}

然后您可以匹配路线名称，以使其更具描述性：

else if (auth === null && to.name !== 'home')

有没有一种方法可以在Vue JS的路由之前先在全局中指定“任意”路由？

1 个答案: