Routes.js on pageInit issues

PROBLEM
I want a situation where if a user has gone through the onboarding process and register the first time, they should be redirected to the login page the second time and after but this solution works only on web, but when compiled to apk it does not work, it returns the user to the index page.

MY SOLUTION (ROUTES.JS)

var routes = [
  {
    path: '/',
    on: {
        pageInit: function (e, page) {
          // do something when page initialized

          const self = this;
          // const app = self.$f7;
          const app = self.app;

          localStorage = window.localStorage;
          
          // return false;

          if ( localStorage.getItem('onboarding-completed') == 'true' &&  localStorage.getItem('user-type') == "user" ) {

            // check if the user is logged in

            var view = app.views.create(".view-main",{
                    url: '/'
                  });

            if ( localStorage.getItem('logged-in') == 'true' ) {

              view.router.navigate('/user-dashboard/');

            }else{

              view.router.navigate('/user-login/');

            }

          }


          if ( localStorage.getItem('onboarding-completed') == 'true' &&  localStorage.getItem('user-type') == "rider" ) {

            var view = app.views.create(".view-main",{
                    url: '/'
                  });

            if ( localStorage.getItem('logged-in') == 'true' ) {

              view.router.navigate('/user-dashboard/');

            }else{

              view.router.navigate('/rider-login/');

            }

          }
        },
      }
  },

What do you think i have done wrong?

It is not allowed to use router navigation in pageInit event, you should in route’s async or using beforeEnter/Leave

beforeEnter: does not work it still loads the index page.

And how did you use it?

I did this

 var routes = [
  {
    path: '/',
    name: 'index',
       url: 'index.html',
       beforeEnter: function (routeTo, routeFrom, resolve, reject) {

      localStorage = window.localStorage;

      if (  localStorage.getItem('onboarding-completed') == 'true' &&  localStorage.getItem('user-type') == "user" ) {

        if ( localStorage.getItem('logged-in') == 'true' ) {
          resolve({ componentUrl: './pages/user/dashboard/index.html' });
        }

        resolve({ componentUrl: './pages/user/user-login.html' });
      } else {
        
        if (  localStorage.getItem('onboarding-completed') == 'true' &&  localStorage.getItem('user-type') == "rider" ) {

          if ( localStorage.getItem('logged-in') == 'true' ) {
            resolve({ componentUrl: './pages/rider/dashboard/index.html' });
          } 

          resolve({ componentUrl: './pages/rider/rider-login.html' });
        }

      }
    },
  },

@nolimits4web you can look at the codebase and see what is wrong here https://we.tl/t-ibxJABNtOQ

Здесь другая логика с resolve: оно не изменить маршрут в отличии от async. Нужно вызывать после reject такое router.navigate в соответствующем контексте

1 Like

beforeEnter resolve doesn’t accept any arguments. resolve() means allow navigating to route, if you need to load something else, then ONLY in beforeEnter you should do:

reject()
var router = this;
router.navigate('/another-page/');

Example you posted is the syntax for async route

@nolimits4web i have tried beforeEnter and async options still it still goes to the index page.

kindly check the link https://we.tl/t-ibxJABNtOQ

Can you just post the relevant code of how did you use it?

I did this

var routes = [
  {
    path: '/',
    name: 'index',
    url: 'index.html',
    async(routeTo, routeFrom, resolve, reject) {

      localStorage = window.localStorage;

      if ( localStorage.getItem('onboarding-completed') == 'true' ) {
        resolve({
          url: 'secured-page.html',
        });
      } else {
        resolve({
          loginScreen: {
            url: 'login-screen.html'
          } ,
        });
      }
    },

Then i tried this also,

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

      localStorage = window.localStorage;

      if (  localStorage.getItem('onboarding-completed') == 'true' &&  localStorage.getItem('user-type') == "user" ) {

        if ( localStorage.getItem('logged-in') == 'true' ) {
          // resolve({ componentUrl: './pages/user/dashboard/index.html' });

          resolve();
          var router = this;
          router.navigate('/user-dashboard/');
        }else{

          resolve();
          var router = this;
          router.navigate('/user-login/');

        }

        resolve({ componentUrl: './pages/user/user-login.html' });
      } else {
        
        if (  localStorage.getItem('onboarding-completed') == 'true' &&  localStorage.getItem('user-type') == "rider" ) {

          if ( localStorage.getItem('logged-in') == 'true' ) {
            resolve({ componentUrl: './pages/rider/dashboard/index.html' });
          } 

          resolve({ componentUrl: './pages/rider/rider-login.html' });
        }

      }
    },

url and async can’t be used together, this is correct with async

var routes = [
  {
    path: '/',
    name: 'index',
    async(routeTo, routeFrom, resolve, reject) {

      localStorage = window.localStorage;

      if ( localStorage.getItem('onboarding-completed') == 'true' ) {
        resolve({
          url: 'secured-page.html',
        });
      } else {
        resolve({
          loginScreen: {
            url: 'login-screen.html'
          } ,
        });
      }
    },

Your beforeEnter example also totally wrong, resolve DOES NOT accept arguments there. If you want to load another route there, you FIRST NEED TO DO reject :slight_smile:

beforeEnter: function (routeTo, routeFrom, resolve, reject) {
  var router = this;
  if (needToRedirect) {
    // REJECT FIRST
    reject();
    // THEN NAVIGATE
    router.navigate('/some-path/');
    // RETURN
    return;
  }
  // JUST RESOLVE TO KEEP LOADING CURRENT ROUTE
  resolve();
}
      

needToRedirect is a “condition” right or variable right?

Does async and beforeEnter work on “/” route path?

beforeEnter works on other route path

Because it is not working.

var routes = [
  {
    path: '/',
    name: 'index',
    /*async(routeTo, routeFrom, resolve, reject) {

      localStorage = window.localStorage;

      if ( localStorage.getItem('onboarding-completed') == 'true' ) {
        resolve({
          url: './pages/user/user-login.html',
        });
      } else {
        resolve({
          loginScreen: {
            url: './pages/user/user-profile-complete.html'
          } ,
        });
      }
    },*/
    beforeEnter: function (routeTo, routeFrom, resolve, reject) {
      var router = this;
      if (localStorage.getItem('onboarding-completed') == 'true') {
        // REJECT FIRST
        reject();
        // THEN NAVIGATE
        router.navigate('/some-path/');
        // RETURN
        return;
      }
      // JUST RESOLVE TO KEEP LOADING CURRENT ROUTE
      resolve();
    },

Yes, it work on ‘/’ but home page must be moved to route https://framework7.io/docs/view.html#initial-page-route

I had this already

var view = app.views.create(".view-main",{
  url: '/'
});

What does this mean, because it still goes to the index page.

Or is it because my homepage is index.html

folder structure

does that affect it?

It is said in that link i sent, you need to move content of the home page to separate file like other pages