App.router.navigate() not working in start App


#1

I am having problems with the application routes, I am trying to put an action that when the user opens the application it is redirected to the Login screen.

Example my code:

var Index = {

    //Application Constructor
    initialize: function() {
        this.bindEvents();
    },

    //Bind Event Listeners
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        document.addEventListener("resume", this.onResume, false);
    },

    //Event Handle
    onDeviceReady: function() {        
        if(!localStorage.getItem('isLogged')){   
            alert('Inside')       
            app.router.navigate('/login/');
         }
    },

    //Event Handle
    onResume: function() {

    }
};

$(function(){
    Index.initialize();    
});

The alert is displayed, but my route does not work …No error is displayed on the console. But, if on the console I put “app.router.navigate(’/login/’)” in this case the screen is redirected for o Login.

I recently tried another method that I saw, which is adding within the application instance the check, I did this way:

// Init App
var app = new Framework7({
  id: 'testes.app.testes',
  root: '#app',
  theme: theme,
  data: function () {
    return {
      //url: 'http://127.0.0.1:8000/',
      name: '',
    };
  },
  dialog: {    
    title: 'Alerta',    
    buttonOk: 'Sim',    
    buttonCancel: 'Não', 
  },
  methods: {
    error: function (http) {
      if(http.response != '' && http.response.indexOf('message') > 0){
        var json = JSON.parse(http.response);
        app.dialog.alert(json.message);
      }else{
        app.dialog.alert('Ops, ocorreu algum problema para realizar a conexão, tente novamente em instantes.');
      }
    },
  },
  on: {
      pageInit: function() {         
         if(!localStorage.getItem('isLogged')){          
            this.router.navigate('/login/');
         }
      }
   },
  routes: routes,
});

But not work… Any solution???


#2

Use initial route technik to load required initial route http://framework7.io/docs/view.html#initial-page-route


#3

I understood, but should not it work?

I say this because in the future I can have 3 types of checks, and certain type I’m going to forward to a page. But this redirection will be the moment you open the page.

Today, just using for login will partially solve, but in the future the situation I mentioned above will be a problem.


#4

You need try the receipt:

  1. Set init parameter off your app to false (disable auto init, maybe initOnDeviceReady too) and DISABLE view auto init in your layout.
  2. Create your main view with conditions, e.g.:

var mainView;
…next in your pre-init code…
mainView = app.views.create(’.view-main’, {
url: yourCondition ? ‘/custompage1/’ : ‘/custompage2/’ /* or custom3, custom4… */
});

  1. Call init of your app manually:

$$(document).on(‘deviceready’, function () {
app.init();
});

If you application contains any starter pages with dependencies from any external data or internal data (async) I not see other ways.


#5

Calling router.navigate redirect may not work in pageInit and this is not a good practise. Then you can just use async route for home page where you can do as many checks as you need and return appropriate page