How can I redirect to a specific route from a children using beforeEnter

Question

According to the route configuration below, my application should redirect to '/login' if the user is not authenticated :

const ifAuthenticated = (to, from, next) => {
  if(Store.getters.isAuthenticated) {
    next();
    return;
  }
  else
  {
    next({ path: '/login' });
  }
}

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: DsLogin
    },
    {
      path: '/',
      name: 'home',
      component: DsHome,
      beforeEnter: (to, from, next) => {
        ifAuthenticated(to, from, next);
      },
    },
    {
      path: '/other',
      name: 'other',
      component: DsOther,
      beforeEnter: (to, from, next) => {
        ifAuthenticated(to, from, next);
      },
    },
    {
      path: '/demand-history',
      name: 'demand history',
      component: DsDemandHistory,
      beforeEnter: (to, from, next) => {
        ifAuthenticated(to, from, next);
      },
      redirect: '/demand-history/1/all/all/all',
      children: [
        {
          path: ':page/:type/:state/:owner',
          name: 'demand history filtered',
          props: true,
          beforeEnter: (to, from, next) => {
            ifAuthenticated(to, from, next);
          }
        }
      ]
    }
  ]
})

It works well when i'm navigating to path '/' or '/other'. But when i'm navigating to the path '/demand-history/1/all/all/all', I get redirected to '/demand-history/1/all/all/login'

using next({ name: 'Login' }) does not work either

How should I manage to get redirect to '/login' as well ?

Thx

Answer 1

The redirection was not initiate by the method ifAuthenticated but upstream in my code.

An Interceptor caught a 401 error and redirect to login using Router.push('login')

Altering the code with Router.push({ name: 'Login' }) solved my problem.