undefinedfix
Sign in

Excuse me, use Vue router to jump to a page, and then router.beforeEach Triggered twice. Why

khellang edited in Sun, 22 May 2022

Problem description

When I integrate the front and back of a project, the login page in the background“ http://localhost :8080/#/Manage_Login/ ”Will automatically jump to http://localhost : 8080 / # / index ", and then I didn't use route redirection, and later found that it was router.beforeEach Triggered twice. Why

The background of the problem and what methods have you tried

Related codes

router.beforeEach((to, from, next) => {
  var data = JSON.parse(localStorage.getItem('key'));
  console.log('to', to,'from', from)
  if (to.matched.some(r => r.meta.requireAuth)) {
    if (data) {    
      next();
    } else {
      var state = localStorage.getItem('state');
      //企业微信
      if (state === 0) {
        next({
          path: '/ErrorPage/登录已失效,请重新登录!'
          // query: {redirect: to.fullPath}
        })
      } else {
       
        next({
          path: '/Login',
          query: {
            redirect: to.fullPath
          }
        })
      }
    }
  } else {
    console.log(1)
    next();
  }
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  console.log(2)
  // next()
})

Triggered twice router.beforeEach

clipboard.png

3 Replies
jakab922
commented on Sun, 22 May 2022

There is indeed such a problem. We need to look at the source code to understand that the three parameters are sequential.

The problem code is as follows:

router.beforeEach((to, from, next) => {
    var user = JSON.parse(sessionStorage.getItem('user'));
    if(user == null){
       next({ path: '/login' }); // 没有用户,就跳去登录
    } else {
       next();
    }
});

It seems that if user is null, it will jump to the route of '/ Login'. However, the execution order of the to, from and next variables should be as follows:

First, the route will arrive first to.path Then check next.path If there is no value, it will not jump. If there is, it will go to next.path This value jumps.

Now that's the case, suppose to.path == '/login',

In the case of the code just now, the route first jumps to / login, then checks next, and finds that the path in next is' / Login ', which is not empty, so it continues to hop next.path This route, which is also called '/ Login', when it jumps this time, to.path If it is set to '/ Login', then it will return to the starting situation, and the loop will be dead.

So how can we avoid this situation? It's very simple. Every time we want to change the jump, that is to say, we need to give next.path When assigning a value, as long as the value and to.path If the value of is the same, then do not assign the value, and the assignment will be a dead loop.

So the correct code is as follows:

router.beforeEach((to, from, next) => {

    var user = JSON.parse(sessionStorage.getItem('user'));
    if(user == null){
        if(to.path == '/login'){ // 如果to.path 的值和我们要跳转的值相同,不要赋值
            next();
        } else {
            next({ path:'/about' });
        }
    } else {
        next();
    }
});
Dx_sty
commented on Sun, 22 May 2022

It's not these problems. I wrote the wrong page. Thank you

Jinja_dude
commented on Sun, 22 May 2022

What's your problem?

lock This question has been locked and the reply function has been disabled.