[Vuejs]-Infinite loop with vue router beforeEach and children paths

by

1👍

✅

Hmm at first glance I’d try to make this convoluted if in your beforeEach method simpler. Try to add something like requiresAuth: true to the meta of all your routes that require a logged in user.

In a sense you want something like this in your routes:

  // ...
  {
    path: '/users/:userId(\\d+)/edit/',
    name: 'EditUser'
    props: true,
    meta: {
        requiresAuth: true, // <-- add this meta flag against which you check later in beforeEach
    },
    component: () => import(/* webpackChunkName: "user-edit" */ '@/views/UserEdit.vue'),
  },
  // ...

And this in your beforeEach:

router.beforeEach((to, from, next) => {
    if (to.matched.some((record) => record.meta.requiresAuth)) { // <-- check for requiresAuth here
        // assuming your login mixin works
        // if I were you I'd store some JWT in localStorage and check that somehow in a vuex getter
        if (!LoginMixin.methods.loginMixinCheckAuth()) {
            next('/login')
        } else {
            next()
        }
    } else {
        next()
    }
})

To answer this in full would be kinda bulky so go and check out how I did that using meta here and implemented a beforeEach rule here

👤Klemen Tusar

Leave a comment