Vue JS (router.beforeEach) failed to convert exception to string

Question

I'm trying to use router.beforeEach with localStorage. If there is data in localStorage, I want to skip the homepage. If there is no data, enter the homepage. I can print the data with console.log, but the router process fails

[vue-router] uncaught error during route navigation > failed to convert exception to string.

How do I control the navigation?

My router.js:

Vue.use(Router);

const router = new Router({
    routes: [{
            path: '/',
            name: 'index',
            components: {
                default: Index,
                header: MainNavbar
            },
            props: {
                header: {
                    colorOnScroll: 400
                }
            }
        },
        {
            path: '/landing',
            name: 'landing',
            components: {
                default: Landing,
                header: MainNavbar,
                footer: MainFooter
            },
            props: {
                header: {
                    colorOnScroll: 400
                },
                footer: {
                    backgroundColor: 'black'
                }
            }
        },
        {
            path: '/login',
            name: 'login',
            components: {
                default: Login,
                header: MainNavbar
            },
            props: {
                header: {
                    colorOnScroll: 400
                }
            }
        },
        {
            path: '/profile',
            name: 'profile',
            components: {
                default: Profile,
                header: MainNavbar,
                footer: MainFooter
            },
            props: {
                header: {
                    colorOnScroll: 400
                },
                footer: {
                    backgroundColor: 'black'
                }
            }
        }
    ],
    scrollBehavior: to => {
        if (to.hash) {
            return {
                selector: to.hash
            };
        } else {
            return {
                x: 0,
                y: 0
            };
        }
    }
});

router.beforeEach((to, from, next) => {
    let adres = JSON.parse(localStorage.getItem('adres'));
    if (!adres) {
        next('/');
    } else {
        next('/login');
    }
});

export default router;

Example localdata:

{  
   "id":1,
   "adi":"Demo",
   "soyadi":"Sef",
   "telefon":"05322375277",
   "adres":"Girne Mahallesi 6022 Sk. No:22 Kahta/Adıyaman",
   "fotograf":"http://localhost:8000/media/kullanici/sef/demosef/chef-1.jpg"
}

Husam Ibrahim · Accepted Answer · 2018-10-21T10:42:53.963

You are creating an infinite loop where your beforeEach guard gets triggered over and over. In the beforeEach it checks whether there is an address in localStorage and redirects to either / or /login. Then again before you enter the new route beforeEach is called and checks if there is an address and redirects. The process is repeated ad infinitum. You need to call next() without any parameters somewhere in your beforeEach guard to confirm normal navigation. So you might want to do something like this ..

router.beforeEach((to, from, next) => {
  if (to.path == '/') {  // If we are entering the homepage.
    let adres = JSON.parse(localStorage.getItem('adres'));
    if (!adres) {
      next();
    } else {
      next('/login');
    }
  } else {  // Not entering the homepage. Proceed as normal.
    next()
  }
});

Vue JS (router.beforeEach) failed to convert exception to string

1 Answers1