如何正确配置依赖协议状态的Vue动态路由？

问题根源分析 #

你遇到的无限重定向，是因为点击同意协议后，导航守卫的逻辑陷入了循环：

• 协议状态变为true后，守卫触发第二个条件（已同意协议但无登录token），跳转到AuthorizationView
• 但AuthorizationView的meta.requiresAuth设为true，进入该页面时守卫再次执行，此时仍满足“已同意协议但无token”的条件，又会重新跳转到AuthorizationView，反复循环导致报错。

修复步骤 #

1. 调整路由Meta配置 #

拆分“协议同意”“登录授权”的判断标识，避免混淆：

const routes = [
    {
        path: "/",
        redirect: "/home",
        component: DefaultLayout,
        meta: {
             requiresLogin: true, // 标记为需要登录才能访问的页面
        },
        children: [
            { path: "/home", name: "HomeView", component: HomeView },
            { path: "/calendar", name: "CalendarView", component: CalendarView },
            { path: "/notes", name: "NotesView", component: NotesView },
            { path: "/settings", name: "SettingsView", component: SettingsView },
        ],
    },
    {
        path: "/terms-of-use",
        name: "TermsOfUseView",
        component: TermsOfUseView,
        meta: {
            isGuest: true,
            isAgreementPage: true, // 标记为协议相关页面
        },
    },
    {
        path: "/agreement",
        redirect: "/offer",
        component: AgreementLayout,
        children: [
            {
                path: "/offer",
                name: "OfferView",
                component: OfferView,
                meta: { isAgreementPage: true },
            },
            {
                path: "/public",
                name: "PublicView",
                component: PublicView,
                meta: { isAgreementPage: true },
            },
        ],
    },
    {
        path: "/auth",
        name: "AuthorizationView",
        component: AuthorizationView,
        meta: {
            isLoginPage: true, // 标记为登录页面，无需登录即可访问
        },
    },
    {
        path: "/plug",
        name: "PlugView",
        component: PlugView,
    },
];

2. 重构导航守卫逻辑 #

明确各个判断分支的边界，避免循环跳转：

router.beforeEach((to, from, next) => {
    const hasAgreed = agreement.value;
    const hasLoggedIn = store.state.user.google_token || store.state.user.apple_token;

    // 未同意协议，且当前不是协议页面 → 强制跳转到协议页
    if (!hasAgreed && !to.meta.isAgreementPage) {
        next({ name: "TermsOfUseView" });
        return;
    }

    // 已同意协议但未登录，且当前不是登录页面 → 强制跳转到登录页
    if (hasAgreed && !hasLoggedIn && !to.meta.isLoginPage) {
        next({ name: "AuthorizationView" });
        return;
    }

    // 已登录但访问访客页面 → 强制跳转到首页
    if (hasLoggedIn && to.meta.isGuest) {
        next({ name: "HomeView" });
        return;
    }

    // 所有前置条件满足，正常跳转
    next();
});

关键优化点 #

• 拆分了“协议校验”和“登录校验”两个独立逻辑，避免原逻辑中requiresAuth的歧义
• 通过isAgreementPage和isLoginPage标记目标页面，防止重复跳转进入循环
• 每个判断分支添加return，确保逻辑执行后直接跳出，避免后续代码干扰

内容的提问来源于stack exchange，提问作者Summer Knight