Maximum Call Stack Exceed Using Vue Js Router

Question

I have common problem like other people here and i try to follow their solution but i still can't get it through. Here in my app, i need to login first then select the corporation before proceeding to the main page. I have no problem with the login, my problem is on the select corporation. I need to attach a guard that could prevent them from accessing the main page if they have not chosen a corporation. What i did is check the localstorage if the selectCorporation is empty, then i will be able to know that they have selected a corporation.

const router = new Router({
    mode: 'history',
    routes: [
    { path: '/', name: 'overview', component: Overview },

        // Authentication
        { path: '/auth/login', name: 'auth.login', component: Login, meta: { requiresVisitor: true }},

        //Select Corporation
        { path: 'select-corporation', name: 'corporations.select', component: CorporationsSelect }

        // Branches
        { path: '/branches', name: 'branches.index', component: BranchesIndex },
        { path: '/branches/create', name: 'branches.create', component: BranchesCreate },
        { path: '/branches/:id', name: 'branches.view', component: BranchesView },
        { path: '/branches/:id/edit', name: 'branches.edit', component: BranchesEdit },

    });

    router.beforeEach((to, from, next) => {

            if (localStorage.getItem('selectedCorporation') === null) {
                next({
                    path: '/select-corporation'
                });
            } else {
                next({
                    path: '/branches'
                });
            }
    });

export default router;

I think your guard is always redirecting to select-corporation even if target route is select-corporation itself. So it's infinite redirect loop. — Max Sinev
– Max Sinev, Commented Nov 25, 2018 at 14:45
@MaxSinev. yeah i believe thats the problem. So how i can fix this i already put the else condition? thanks — Joseph
– Joseph, Commented Nov 25, 2018 at 14:47

Max Sinev · Accepted Answer · 2018-11-25 15:30:03Z

1

Check that your target route is not select-corporation to interrupt infinite redirecting loop, also "else" block causes the same behavior if corporation is selected already:

    router.beforeEach((to, from, next) => {
        if (localStorage.getItem('selectedCorporation') === null) {
            // checking to avoid loop
            if (to.name === 'corporations.select') return next();
            next({
                path: '/select-corporation'
            });
        }
        else {
           next();
        }
     });

If you want to redirect user to branches page after corp selected, just do it in CorporationsSelect instead.

edited Nov 25, 2018 at 15:30

answered Nov 25, 2018 at 15:02

Max Sinev

6,0192 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Joseph Over a year ago

Thanks for the answer. But still the same error. Maximum call stack exceeded

Max Sinev Over a year ago

@Joseph you missed / in the beginning of corporation route path, add it and try again.

Max Sinev Over a year ago

I updated my answer code a little bit. You can check this jsfiddle i created to test your issue jsfiddle.net/3px84r2b there is no error...

Joseph Over a year ago

I got it. Thanks a lot. Have a great day

Joseph Over a year ago

When i try to click other button when selectedCorporation is null, thats when the maximum call stack appears. Any idea how to fix this?

|

Ashish Kumar · Accepted Answer · 2023-07-06 04:09:27Z

0

you may add a check. if coming from and next path is not same then go for path.

 if (localStorage.getItem('selectedCorporation') === null) {
    if (to.redirectedFrom !== to.path) {
       next({path: '/select-corporation'});
      } 
     } else {
        next({path: '/branches' });
     }

it worked for me .

answered Jul 6, 2023 at 4:09

Ashish Kumar

1132 silver badges8 bronze badges

Collectives™ on Stack Overflow

Maximum Call Stack Exceed Using Vue Js Router

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related