Can't figure out router.navigate

Questions
1

I just started my first Framework7 app and a portion of the app requires Login. I’ve created a Login page and when I link straight to the page it works just fine. The problem comes when I try to redirect to login when another page is accessed that requires logging in.

Here is what I am currently doing. I only have 1 view which is defined as:

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

My routes are defined as:

routes: [
        {
            name: 'home',
            path: '/',
            url: 'home.html'
        },
        {
            name: 'login',
            path: '/login/',
            url: 'login.html'
        },
        {
            name: 'settings',
            path: '/settings/',
            url: 'settings.html',
            on: {
                pageBeforeIn: function (event, page) {
                    //We need to make sure that we are logged in.
                    forceLogin('settings');
                }
            }
        }]

As you can see, my settings page has a call to a forceLogin function on pageBeforeIn. This function saves the page that we are going to in a variable and then attempts to redirect to login. My goal is to then redirect to the settings page after login is successful. I’ve tried each of the following things to redirect to the login page but none of them work:

resolve('/login/');

app.router.navigate('/login/');
myView.router.navigate('/login/');
mainView.router.navigate('/login/');

What am I doing wrong here?

2

You can’t prevent router from routing in pageBeforeIn event as it is already started. You need to use async route for such case, for example:

{
  name: 'settings',
  path: '/settings/',
  async: function (routeTo, routeFrom, async, reject) {
    var router = this;
    if (/* user is logged in */) {
      resolve({
        url: 'settings.html'
      })
    } else {
      // reject
      reject();

      // and load login
      router.navigate('/login/');
    }
  }
}