When the page is reloaded, the application is reset to the home page, and if the user is logged in, it remains on the same page, how to fix it?

Question

Vue.js

When the page is reloaded, the application is reset to the home page, and if the user is logged in, it remains on the same page.

If you remove this piece of code, nothing will change

const loggedIn = localStorage.getItem("user");
  if (to.matched.some(record => record.meta.requiresAuth) && loggedIn) {
    console.log('111111111111111111');
    next("/");
  }
  next();

  if (to.meta.title) {
    document.title = to.meta.title;
  }

router code

import { createRouter, createWebHistory } from "vue-router";
//middlewares

//pages
const Welcome = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Welcome/Welcome.vue"
  );

const AboutUs = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/AboutUs/AboutUs.vue"
  );

const AboutThePlantation = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/AboutThePlantation/AboutThePlantation.vue"
  );

const Guarantees = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Guarantees/Guarantees.vue"
  );

const Faq = () =>
  import(/* webpackChunkName: "view-[request]" */ "@/pages/FAQ/Faq.vue");

const News = () =>
  import(/* webpackChunkName: "view-[request]" */ "@/pages/News/News.vue");

const NewsDetail = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/News/NewsDetail.vue"
  );

const Contact = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Contact/Contact.vue"
  );
const Support = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Support/Support.vue"
  );

const NotFound = () =>
  import(/* webpackChunkName: "view-[request]" */ "@/pages/404.vue");

const Login = () =>
  import(/* webpackChunkName: "view-[request]" */ "@/pages/Auth/Login.vue");

const Register = () =>
  import(/* webpackChunkName: "view-[request]" */ "@/pages/Auth/Register.vue");

const Profile = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/Profile.vue"
  );

// const MyTrees = () =>
//   import(
//     /* webpackChunkName: "view-[request]" */ "@/pages/Profile/MyTrees.vue"
//   );

const Finance = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/Finance.vue"
  );

const ChangeTariff = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/ChangeTariff/ChangeTariff.vue"
  );

const StockMarket = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/StockMarket.vue"
  );

const Settings = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/Settings.vue"
  );

const Documents = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/Documents.vue"
  );

const Certificate = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/Certificate.vue"
  );

const BuyAtreeNow = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/BuyAtreeNow.vue"
  );

const StocksDetail = () =>
  import(
    /* webpackChunkName: "view-[request]" */ "@/pages/Profile/StocksDetail.vue"
  );

const Succes = () =>
  import(/* webpackChunkName: "view-[request]" */ "@/pages/Profile/Succes.vue");

const routes = [
  
  {
    path: "/",
    name: "Home",
    component: Welcome,
    meta: {
      title: "Investing in trees | WorldPlanting",
      layout: "default",
    }
  },
  {
    path: "/about-us",
    name: "AboutUs",
    component: AboutUs,
    meta: {
      title: "Safe investment in trees | WorldPlanting",
      layout: "default"
    }
  },
  {
    path: "/about-the-plantation",
    name: "AboutThePlantation",
    component: AboutThePlantation,
    meta: {
      title: "Plantation of an innovative project | WorldPlanting",
      layout: "default"
    }
  },
  {
    path: "/guarantees",
    name: "Guarantees",
    component: Guarantees,
    meta: {
      title: "Guarantees of an innovative project | WorldPlanting",
      layout: "default"
    }
  },
  {
    path: "/faq",
    name: "FAQ",
    component: Faq,
    meta: {
      title: "Q&A about of the company | WorldPlanting",
      layout: "default"
    }
  },
  {
    path: "/news",
    name: "News",
    component: News,
    meta: {
      title: "Green news | WorldPlanting",
      layout: "default"
    }
  },
  {
    path: "/news/:id",
    name: "NewsDetail",
    component: NewsDetail,
    props: true,
    meta: {
      title: "More about news | WorldPlanting",
      layout: "default"
    }
  },
  {
    path: "/contact",
    name: "Contact",
    component: Contact,
    meta: {
      title: "Contact details | WorldPlanting",
      layout: "default"
    }
  },
  {
    path: "/support",
    name: "Support",
    component: Support,
    meta: {
      title: "Help | Innovative project WorldPlanting",
      layout: "default"
    }
  },
  {
    path: "/:pathMatch(.*)*",
    component: NotFound,
    meta: {
      layout: "default"
    }
  },
  {
    path: "/register",
    name: "Register",
    component: Register,
    meta: {
      title: "Регистрация",
      layout: "auth"
    }
  },
  {
    path: "/login",
    name: "Login",
    component: Login,
    meta: {
      title: "Авторизация",
      layout: "default"
    }
  },
  {
    path: "/profile",
    name: "Profile",
    meta: {
      title: "Профиль",
      layout: "personal",
      requiresAuth: true
    },
    component: Profile
  },
  // {
  //   path: "/profile/my-trees",
  //   name: "My trees",
  //   meta: {
  //     title: "Personal account | WorldPlanting",
  //     layout: "personal",
  //     requiresAuth: true
  //   },
  //   component: MyTrees
  // },
  {
    path: "/profile/finance",
    name: "Finance & My Trees",
    meta: {
      title: "Attachments | WorldPlanting",
      layout: "personal",
      requiresAuth: true
    },
    component: Finance
  },
  {
    path: "/profile/change-tariff",
    name: "ChangeTariff",
    meta: {
      title: "Change Tariff",
      layout: "personal",
      requiresAuth: true
    },
    component: ChangeTariff
  },
  {
    path: "/profile/plantations",
    name: "Plantations",
    meta: {
      title: "Choose your plantation | WorldPlanting",
      layout: "personal",
      requiresAuth: true
    },
    component: StockMarket
  },
  {
    path: "/profile/settings",
    name: "Settings",
    meta: {
      title: "Intelligence | WorldPlanting",
      layout: "personal",
      requiresAuth: true
    },
    component: Settings
  },
  {
    path: "/profile/documents",
    name: "Documents",
    meta: {
      title: "Transaction reports and guarantees | WorldPlanting",
      layout: "personal",
      requiresAuth: true
    },
    component: Documents
  },
  {
    path: "/profile/certificate",
    name: "Certificate",
    meta: {
      title: "Gift certificates | WorldPlanting",
      layout: "personal",
      requiresAuth: true
    },
    component: Certificate
  },
  {
    path: "/profile/buy-a-tree-now",
    name: "Buy a tree now",
    meta: {
      title: "More about trees on the plantation | WorldPlanting",
      layout: "personal",
      requiresAuth: true
    },
    component: BuyAtreeNow
  },
  {
    path: "/profile/stocks/:id",
    name: "StocksDetail",
    component: StocksDetail,
    props: true,
    meta: {
      title: "More about trees on the plantation | WorldPlanting",
      layout: "personal",
      requiresAuth: true
    },
  },
  {
    path: "/profile/succes",
    name: "Succes",
    meta: {
      title: "Succes",
      layout: "personal",
      requiresAuth: true
    },
    component: Succes
  }
  // {
  //   path: "/news/news-detail",
  //   name: "AllNews",
  //   meta: {
  //     title: "AllNews",
  //     layout: "personal",
  //     requiresAuth: true
  //   },
  // }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  mode: 'history',
  scrollBehavior() {
    document.getElementById("app").scrollIntoView();
  }
});
setInterval(() => {
  
  console.log(process.env.BASE_URL + 'dasdas');
}, 2000);
/*function nextFactory(context, middleware, index) {
  const subsequentMiddleware = middleware[index];
  if (!subsequentMiddleware) {
    return context.next;
  }
  return (...parameters) => {
    context.next(...parameters);
    const nextMiddleware = nextFactory(context, middleware, index + 1);
    subsequentMiddleware({ ...context, nextMiddleware });
  };
}*/

router.beforeEach((to, from, next) => {
  const loggedIn = localStorage.getItem("user");
  if (to.matched.some(record => record.meta.requiresAuth) && loggedIn) {
    console.log('111111111111111111');
    next("/");
  }
  next();

  if (to.meta.title) {
    document.title = to.meta.title;
  }
  /*if (to.meta.middleware) {
    const middleware = Array.isArray(to.meta.middleware)
      ? to.meta.middleware
      : [to.meta.middleware];
    const context = { from, next, router, to };
    const nextMiddleware = nextFactory(context, middleware, 1);
    return middleware[0]({ ...context, next: nextMiddleware });
  }
  return next();*/
});

export default router;

Answer 1

Similar problem. The fact is that the router works out faster, but there is no data in the store at this moment. Haven't found a solution yet.