0

Хочу сделать динамический роутинг для сайта, который зависит от изменения agreement. Есть следующее дерево путей:

const routes = [
    {
        path: "/",
        redirect: "/home",
        component: DefaultLayout,
        meta: {
            requiresAuth: 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,
        },
    },
    {
        path: "/agreement",
        redirect: "/offer",
        component: AgreementLayout,
        children: [
            {
                path: "/offer",
                name: "OfferView",
                component: OfferView,
            },
            {
                path: "/public",
                name: "PublicView",
                component: PublicView,
            },
        ],
    },
    {
        path: "/auth",
        name: "AuthorizationView",
        component: AuthorizationView,
        meta: {
            requiresAuth: true,
        },
    },
    {
        path: "/plug",
        name: "PlugView",
        component: PlugView,
    },
];

При этом у меня идет отслеживание (пока что только) agreement.

const agreement = computed(() => store.state.agreement);

Также у меня есть хук

router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !agreement.value) {
        next({ name: "TermsOfUseView" });
    } else if (
        agreement.value &&
        (!store.state.user.google_token || !store.state.user.apple_token)
    ) {
        next({ name: "AuthorizationView" });
    } else if (store.state.user.token && to.meta.isGuest) {
        next({ name: "HomeView" });
    } else {
        next();
    }
});

На странице TermsOfUse при нажатии на I agree изменяется значение agreement. И после этого возникает ошибка:

Detected a possibly infinite redirection in a navigation guard when going from "/terms-of-use" to "/auth". Aborting to avoid a Stack Overflow.

Каким образом будет лучше настроить данный роутинг, который будет зависеть от динамических значений?

1 ответ 1

0

После долгих неудачных попыток пришла к такому результату. Код, на мой взгляд, кажется несколько нагроможденным - возможно кто-то предложит что-то более изящное или просто более удобный/подходящий вариант - но он работает (вроде как):

router.beforeEach((to, from, next) => {
  const tokenAuth = computed(() => store.state.Auth.authToken);
  const agreement = computed(() => store.state.Auth.nativeData.agreement);
  const guest = computed(() => store.state.Auth.guest);

  if (
    to.meta.requiresAuth &&
    !Boolean(tokenAuth.value) &&
    !agreement.value &&
    !guest.value
  ) {
    next({ name: 'TermsOfUseView' });
  } else if (
    to.meta.isGuest &&
    !Boolean(tokenAuth.value) &&
    agreement.value &&
    !guest.value
  ) {
    next({ name: 'AuthorizationView' });
  } else if (
    to.meta.isGuest &&
    Boolean(tokenAuth.value) &&
    agreement.value &&
    guest.value
  ) {
    next({ name: 'HomeView' });
  } else {
    next();
  }
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.