Максимальный стек вызовов превышен при использовании Vue Js Router

Question

У меня есть общая проблема, как и у других людей, и я пытаюсь следовать их решению, но до сих пор не могу ее решить. Здесь, в моем приложении, мне нужно сначала войти в систему, а затем выбрать корпорацию, прежде чем перейти на главную страницу. У меня нет проблем с логином, моя проблема в избранной корпорации. Мне нужно прикрепить охрану, которая может помешать им получить доступ к главной странице, если они не выбрали корпорацию. Что я сделал, так это проверил локальное хранилище, если selectCorporation пуст, тогда я смогу узнать, что они выбрали корпорацию.

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;

Answer 1

Убедитесь, что ваш целевой маршрут не select-corporation для прерывания бесконечного цикла перенаправления, также блок "else" вызывает такое же поведение, если корпорация уже выбрана:

    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();
        }
     });

Если вы хотите перенаправить пользователя на branches Страница после Corp выбран, просто сделайте это в CorporationsSelect вместо.

Answer 2

вы можете добавить чек. если исходящий и следующий пути не совпадают, тогда идите по пути.

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

это сработало для меня.