[Vue] route's beforeEnter does not execute on <f7-view> default page nor on page reload

Questions
1

I am trying to implement a login system into my app.

In routes.js I have the following function:

function checkAuth({ to, from, resolve, reject }) {
  if (store.getters.userAuthenticated) {
    resolve();
  } else {
    resolve('/login-screen/');
  }
}

and my ‘/’ route is defined like this:

  {
    path: '/',
    component: HomePage,
    beforeEnter: checkAuth
  }

finally, my app.vue looks like this:

 <template>
  <f7-app v-bind="f7params">
    <f7-view
      main
      url="/"
    >
    </f7-view>
  </f7-app>
</template>

The issue is, whenever i open my app or reload the browser window, checkAuth() does not get executed. It is, however, executed when I click a link within the app, such as /settings/.

Could you please advise me on whether this behavior is intentional and also help me make checkAuth() execute at all times?

I’m using framework7 6.1.0 and framework7-vue 6.1.0.

Thank you.

2

So far I have noticed that only pages where is the root component do not execute checkAuth. If I remove the tag, the app works as expected.

3

Example you posted can’t work even in theory, beforeEnter doesn’t accept any arguments in resolve() and can’t open login page in this case Routes | Framework7 Documentation

Use async instead and resolve it with different component Routes | Framework7 Documentation

4

Thank you for the swift reply!

I have changed my route so now it looks like:

  {
    path: '/',
    async({ resolve, reject }) {
      if (store.getters.userAuthenticated) {
        resolve({ component: HomePage });
      } else {
        resolve({ component: LoginScreen });
      }
    }
  }

however there is one peculiar problem: the resolve({ component: HomePage }) branch gets executed, but no redirection takes place. When I replace the if condition with something else (such as true or false) the redirection behaves as expected. Could you please help me with resolving this?

// this was resolved by removing the url=’/’ parameter from my main view and the whole functionality was achieved by swapping async localForage with sync localStorage.

5

Or…


path: "/",

    beforeEnter({ resolve, reject }) {

      if (hasToken()) {

        resolve();

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

      } else {

        reject();

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

      }

    },