vue3使用路由守卫出现的问题合集

1. 登录后停留在登录页面无法跳转 --24.9.3
   原代码:

function isRoute (to) {
  let res = router.getRoutes()
  let resFil = res.filter(item => item.path === to.path)
  return resFil.length > 0
}
router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !store.state.token) {
    next({ name: 'login' })
  } else if (!isRoute(to)) {
    next({ name: '404' })
  } else next()
})

看上去没有逻辑问题, log一下看看:

  console.log('to.path'+to.path);
  console.log("from.path"+from.path);
  console.log('token'+store.state.token);

打印出来发现token为空值, 检查login部分的逻辑代码:

const handleLogin = async () => {
  const res = await proxy.$api.getMenu(loginForm)
  console.log(res)
  store.setMenuList(res.menuList)
  store.token = res.token
  store.dynamicRoute(router)
  router.push('/home')
}

可以发现存储token的代码有问题, 应为: store.state.token = res.token