How to properly block access to the route?

Question

css

I want to block access to unauthorized users.
Wrote this code.

router.beforeEach((to, from, next) => {
  const authUser = localStorage.getItem("auth");
  const profilePages = ["/profile"];
  const orderPaymnetPages = ["/order-payment"];
  const authRequired = !profilePages.includes(to.path);
  const authRequired2 = !orderPaymnetPages.includes(to.path);

  if (authRequired && authRequired2 && !authUser) {
    next("/");
  }
  next();
});

But it throws an error RangeError: Maximum call stack size exceeded.
It is necessary that access to the /profile and /order-payment routes be blocked.
How can I fix it?

Answer 1

In the basic version, at the very moment the background image appears, its properties change transform: scale(reduce the size), filter: blur(reduce the blur) and opacity(either make this image appear, or leave the previous background with the preloader). Then it smoothly changes transform: translatedepending on the position of the mouse or something else (the video shows that everything "rides" a little). The main danger that could be waiting is the poor performance of CSS filters, so things can get a bit sluggish.
In a good way, of course, it would be worth writing all this in shaders and instead of screwing transform: translatesomething like fake3d , but that's a completely different story...

Answer 2

You work in a circle next("/");.
Add to if to.path !== '/'.