使用 Vue Js 路由器超过最大调用堆栈

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 页面，只需在CorporationsSelect 中执行此操作即可。