Question

我正在用vue开发Web，我意识到如果将其放在控制台中

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

Vue路由器安全吗？

1 个答案: