How to redirect on other route if condition is true in in router.js vuejs

Question

I have multi auth application in vuejs . So, in router.js i checked that if customer is logged in it should redirect to customer dashboard and if admin is logged in it should redirect to admin dashboard

In router.js I have implemented it in beforeEach() . But it is redirecting it many time which gives error.

here is my router.js beforeEachFunction()

if (Object.keys(store.state.AppActiveUser).length !== 0 && !store.state.AppActiveUser.is_customer ) {
       
        if (!to.meta.authRequired && auth.isAuthenticated()) {
            router.push({ path: '/dashboard', name: 'dashboard', component: './views/DashboardAnalytics.vue' })
        }

    } if (Object.keys(store.state.AppActiveUser).length !== 0 && store.state.AppActiveUser.is_customer) {

        if (!to.meta.authRequired && auth.isAuthenticated()) {
            router.push({ path: '/customer/dashboard', name: 'customer-dashboard', component: '@/views/apps/customerComponents/dashboard/DashboardAnalytics.vue' })
        }
    }

Here is the error

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at iterator (app.js:51760)
    at step (app.js:51410)
    at app.js:51411
    at app.js:51785
    at app.js:98591
    at iterator (app.js:51763)
    at step (app.js:51410)
    at runQueue (app.js:51418)
    at HTML5History.confirmTransition (app.js:51793)
    at HTML5History.transitionTo (app.js:51666)

Actuallly before coming to beforeEach i pushe routes in router depend in customer or admin .

Now when I goto customer route it is not having /dashboard route so it tryies again and again I think

Instead of router.push(path: '/customer/dashboard'}) try next({ path: '/customer/dashboard'}); — Kalleshwar Kalshetty, Jan 07 '21 at 11:26
same error. it is basically inside beforeEAch() which check it many many time kind of loop I think — , Jan 07 '21 at 11:30
@Bilalarshad can you try this `router.beforeEach((to, from, next) => { if (Object.keys(store.state.AppActiveUser).length !== 0) { if (!to.meta.authRequired && auth.isAuthenticated()) { if (store.state.AppActiveUser.is_customer) { return next({ path: "/customer/dashboard" }); } else { return next({ path: "/dashboard" }); } } } next() })` — Nilesh Patel, Jan 07 '21 at 11:55

score 0 · Answer 1 · answered Jan 07 '21 at 12:56

So the reason why you have this error is because each time Vue router tries to switch to a new route you tell it to switch to a new route again.

The solution would be to let Vue Router do it's work when you reach the desired destination.

if (Object.keys(store.state.AppActiveUser).length !== 0 && !store.state.AppActiveUser.is_customer ) {
        var am_i_there_yet = to.name == 'dashboard';
        if (!to.meta.authRequired && auth.isAuthenticated() && !am_i_there_yet) {
            router.push({ path: '/dashboard', name: 'dashboard', component: './views/DashboardAnalytics.vue' })
        }

    } if (Object.keys(store.state.AppActiveUser).length !== 0 && store.state.AppActiveUser.is_customer) {
        var am_i_there_yet = to.name == 'customer-dashboard';

        if (!to.meta.authRequired && auth.isAuthenticated() && !am_i_there_yet) {
            router.push({ path: '/customer/dashboard', name: 'customer-dashboard', component: '@/views/apps/customerComponents/dashboard/DashboardAnalytics.vue' })
        }
    }

This is a related question that solves the same problem: Why am I getting the error Maximum call stack size exceeded in Vue Router?

How to redirect on other route if condition is true in in router.js vuejs

1 Answers1