Url not changing as expected

Hi!

I am using async routes to manage if the user is loggedIn or not to display the page.

The problem is that when I type in directly the URL, if I am rerouted to the login page, the URL still displays the “wrong” url. Example, if I type the ‘HOMEPAGE’ url, and I am not logged in, it will reroute to ‘LOGIN’ page, but the url is still the ‘HOMEPAGE’ url.

this is a sample of the code

{

    path: USER_HOMEPAGE,

    options: {

      transition: "f7-parallax"

    },

    async async(routeTo, routeFrom, resolve, reject) {

      const userIsLoggedIn = await getUserAuth();

      console.log(userIsLoggedIn);

      if (userIsLoggedIn) {

        resolve({

          component: HomePage

        });

      } else {

        resolve({

          component: LoginPage

        });

      }

    }

  },

I appreciate any help!

Use beforeEnter for this purpose https://framework7.io/docs/routes.html#route-before-enter-leave where after reject() you can call router.navigate to required page

1 Like

Thanks for your reply!

I am doing the following but it is not going to any url

{
    path: 'profile',
    beforeEnter: async function (routeTo, routeFrom, resolve, reject) {
const userIsLoggedIn = await getUserAuth();
      if userIsLoggedIn) {
          resolve({
         component: UserHomepage
        })
      } else {
        // don't allow to visit this page for unauthenticated users
        resolve({
         component: LoginPage
        })
      }
    },

  },

Your syntax is wrong Doesn't work redirect in beforeEnter(Vue)Heeeelp :c

1 Like

I’m sorry, I have tried the syntax but it’s not working, and I was not able to understand the rest. I tried using router.navigate, but router is not defined. I am in the routes definition.

{

    path: USER_HOMEPAGE,

    options: {

      transition: "f7-parallax"

    },

    beforeEnter: async function(routeTo, routeFrom, resolve, reject){

      const userIsLoggedIn = await getUserAuth();

      if (userIsLoggedIn){

        console.log('user is logged');

        resolve();

        

      } else {

        console.log('user is not logged');

        reject();

        f7.views.main.router.navigate("/")

      }

    },

    async(routeTo, routeFrom, resolve, reject){

      resolve({

        component:HomePage

      })

    }

  },

This code works now ,but it is returning an error in console (that does not seem to affect functionality), am I missing something?

Uncaught TypeError: Cannot read property ‘f7Page’ of undefined