Vue路由器安全吗？

Question

我正在用 vue 开发一个网络，我意识到如果我把它放在控制台中

document.getElementById('app').__vue__.$router.push("some_route")

尽管我在 beforeEach 导航保护 (requireAuth) 中声明了元数据，但它仍然有效。 我需要创建一些随机用户无法访问的路由，在烧瓶中制作的 api 中，我返回一个令牌和一个角色，如果我尝试通过任何导航器中的地址栏访问，这工作正常但是当我通过控制台访问时不是，路由器在没有认证的情况下推送路由。

router.beforeEach(async (to, from, next) => {
  if(to.matched.some(record => record.meta.requiresAuth)){
    let user = JSON.parse(localStorage.getItem('user')) //user is a json with a jwt token

    if (user && user.token){
      
      await user_service.isLogged(to.path).then(response => {
       //wait for a response from the server if the token is valid
        switch (response.status){
          case 200:
            next()
            break;

          case 401:
            next({path: '/login'})
            break;
          
          case 403:
            next({path: '/403'})
            break;
        }
      })
    }else{
      next({path: '/login'})
    }

  }
  next()
})

感谢任何反馈。谢谢！

Answer 1

没有什么可以阻止最终的 next() 运行，这会使您的整个导航守卫变得多余。

要么将其包装在 else 块中，例如

if(to.matched.some(record => record.meta.requiresAuth)) {
  // your code
} else {
  next()
}

或更改您的代码以在适当的位置退出（通过return）

router.beforeEach(async (to, from, next) => {
  if(to.matched.some(record => record.meta.requiresAuth)){
    let user = JSON.parse(localStorage.getItem('user'))

    if (user && user.token){
      await user_service.isLogged(to.path).then(response => {
       //wait for a response from the server if the token is valid
        switch (response.status){
          case 200:
            return next()
          case 403:
            return next({path: '/403'})
          case 401:
          default:
            return next({path: '/login'})
        }
      })
    } else {
      return next({path: '/login'})
    }
  }
  next()
})