Vue 路由器安全吗？

Question

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

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

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

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

Vue 路由器安全吗？

Vue router is safe?

javascript

console

vue.js

vue-router