Component Vue router. Method: router.beforeEach

Hi, everybody. I need help. I think the question is easy, but I can not understand what the reason is.Here is my variable

const routes = [
    {
        path: '/',
        component: FormAuth,
        name: 'FormAuthRoute',
        meta: {
            requiresAuth: true
        }
    },
    {
        path: '/lk',
        component: LkMainPage,
        name: 'LkMainPageRoute'
    }
];

Next, I create a new instance of the object

const router = new VueRouter({
    mode: 'history',
    routes
});

After I need to check whether the user is authorized.

router.beforeEach((to,from,next) => {
    if(to.matched.some(route => route.meta.requiresAuth)){
        if(store._modules.root.state.Auth.is_auth_token !== ''){
            next();
        }else{
            next('/');
        }
    }else{
        next();
    }
});

As a result if the user is not authorized at me there is a looping. Error: RangeError: Maximum call stack size exceeded
In General, if you write a direct path to the next () function, you always get a loop. Please help.

This isn’t why you’re in a loop. You’re in a loop because of the logic you’ve written. Your beforeEach logic says that if you are not authorised then redirect to /, however / requires authorisation therefore you are constantly redirecting the user to /, thus the endless loop.

Instead, you should be redirecting the non authenticated user to a route that does not require auth to view it.

import Vue from 'vue'

router.beforeEach((to,from,next) => {
  if(to.matched.some(route => route.meta.requiresAuth)){
    if(Vue.$store.state.Auth.is_auth_token) return next();

    return next('/non-auth-required-route');
  }

  next();
});

Thanks for your help