Vue.js 如何同时保护'/登录'；或'/登录/'；，和'/仪表板'；或'/仪表板/'；嵌入式路由器

我正在使用vue router在我的系统中设置routeguard，如果用户试图在URL中输入/登录或/登录，如果有令牌，则将用户重定向回仪表板，如果用户没有令牌，则将用户重定向回仪表板

router.js

router.beforeEach((to, from, next) => {
  if (to.fullPath === '/dashboard/') {
    if (!store.state.authToken) {
      next('/login');
    }
  }
  if (to.fullPath === '/login/') {
    if (store.state.accessToken) {
      next('/dashboard');
    }
  }
  next();
});

我的问题是，如果我键入“/login”或“/dashboard”（最后没有反斜杠），它会绕过我的防护，因此我尝试在我的代码中执行

（to.fullPath=='/login/'| |'/login'）

和

（to.fullPath=='/dashboard/'| |'/dashboard'）

，这在4小时前就取得了成功

然后我现在返回，它现在给了我错误，每当我通过URL更改视图时，都会在路线导航期间说

[vue router]未捕获错误

我不知道它为什么停止工作，请帮忙

谢谢大家!

编辑：我输入了一个错误，调用的是accessToken而不是authToken，这就是守卫失败的原因。修好了，谢谢
 只需使用
startsWith
而不是
=
进行比较：

if (to.fullPath.startsWith('/dashboard') {...

这样，您就不用担心后面的斜杠等了。
您可以为路由指定一个名称，然后根据该名称重定向

一个额外的改变可能是在路由中添加一些元，不管路由是否需要对用户进行身份验证，这使得扩展更容易，而不必在beforeach中指定每个受保护的路由

路线

{
  path: '/login',
  name: 'login',
  component: () => import('./views/Login.vue'),
  meta: { requiresAuth: false }
},
{
  path: '/dashboard',
  name: 'dashboard',
  component: () => import('./views/Dasboard.vue'),
  meta: { requiresAuth: true }
}

卫兵

router.beforeach（（to，from，next）=>{
/*“/login”和“/login/”应该共享相同的路由名称，即使它们的路径不同*/
如果（to.name=='login'）{
if（store.state.accessToken）{
下一步（'/dashboard'）；
}
}
//如果路由需要身份验证且未设置令牌，则重定向到登录
if（to.meta.requireAuth）{
如果（！store.state.accessToken）{
下一步（'/login'）；
}
}
next（）；
});
这解决了我的问题，谢谢。不过现在，每当我在URL中推/登录时，即使有令牌，它也不会重定向回/dashboard