I am working on implementing dynamic routing for the website that relies on changes in agreements. Here is the path tree I have set up:
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,
},
];
Currently, I am only tracking changes in agreements.
const agreement = computed(() => store.state.agreement);
In addition, I have a hook for navigation:
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();
}
});
When a user clicks "I agree" on the TermsOfUse page, it triggers a change in the value of agreement. However, this results in an error:
Detected a possibly infinite redirection in a navigation guard when going from "/terms-of-use" to "/auth". Aborting to avoid a Stack Overflow.
What would be the most effective way to configure this dynamic routing based on changing values?