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中进行操作即可。

使用Vue Js路由器超过了最大呼叫堆栈

1 个答案: