Sencha Touch history issue, when using routes and route filters

Question

In Sencha Touch 2, I have a beforeFilter, before the routes.

When the user wants to visit a certain view, the "beforeFilter" acts first.

I use the filters for authentication check and other things. I kept the example very simple, to highlight where I need help:

Ext.define("TestApp.controller.Router", {

    extend: "Ext.app.Controller",

    config: {
         before: {
            home: 'beforeFilter',
            login: 'beforeFilter',
            products: 'beforeFilter'
        },

        routes: {
            '': 'home',
            'home' : 'home',
            'login' : 'login',
            'products' : 'products',
            'products/:id': 'product',
        }
    },

    beforeFilter: function(action) {

        // The before filter acts before the user gets to any of the routes.

        // Check the user's authentication state.

        // If the user wants to visit the "products" route and he ISNT't authenticated,
        // Redirect the user to the login page.
        this.redirectTo('login');

        // else - go to the normal root.
        action.resume();
    },


    home: function () {
        // This and the functions bellow handle the display of the routes.
    },

    login: function () {
    },

    products: function () {
    }
});

The problem.

User wants to view the products route but he isn't logged in.

The beforefilter steps in, and redirects the user to the login page.

Here is where I need help:

If the user is on the login page and clicks a button which triggers Sencha's history.back() event, the user gets redirected to the products page, AGAIN, the beforefilter steps in, and it redirects him back to the login view.

Basically, the history will no longer work.

To solve the problem, I would need a way to keep the products route from being logged into Sencha's history object when the user isn't authenticated.

Do you guys have other ideas?

I asked a more general question about this, but this one feel more documented to the issue in particular.

Answer 1

For views that you don't want to have history support, simply add / change the view without using redirectTo.

Straigh to viewport:

Ext.Viewport.add({xtype: 'myloginview'})

or with navigation view (in a controller):

this.getMyNavView().push({xtype: 'myloginview'})

this way the url doesn't change to #login, and doesn't add to the history stack.