Stop browser back in ui-router - angularjs

Question

Once i logged into application,if i click back button in browser it should not go back to login page again(Back button should be disable at that time).

$stateProvider(function('$stateProvider'){
   $stateProvider
   .state('login',{})
   .state('app.home',{})
   .state('app.contact',{});
});

From login page,im getting into app.home state,once i clicked back button it should not go for login page(Browser back button should be disable).

Thanks in advance.

Answer 1

I think that you have to deal with some basic routes and storage implementation.

Take this structure as an easy example of an authentication: we have the home URL, the default one, we have a login page and a secret page.

    // Route configuration
    var Config = function($stateProvider, $urlRouterProvider){

        $stateProvider

        .state('home', {
            url : '/',
            templateUrl : 'home.html'
        })
        .state('login', {
            url : '/login',
            controller : 'LoginCtrl',
            templateUrl : 'login.html'
        })
        .state('secret', {
            url : '/secret',
            templateUrl : 'secret.html',
            authenticate : true
        })

        $urlRouterProvider.otherwise("/");

    };

    // Dependencie injection
    Config.$inject = [
        '$stateProvider',
        '$urlRouterProvider'
    ];

    // Module declaration
    app.config(Config);

The secret page is available only for authenticated user, so you put a parameter in the state itself to indicate that this page needs some authentication.

To deal with the authentication process, like the redirect, you can create a run function which will have an event, listening to state changing.

If you will reach a page that needs authentication, you will check that and redirect the user to the login page.

If the user is already logged in and try to go manually to the login page, you will redirect him to the home page maybe with a feedback message.

    // Initialize the application
    var Init = function($rootScope, $state){

        $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {

            var isLogged = localStorage.getItem('auth');

            if(toState.authenticate && isLogged === null){

                event.preventDefault();

                // Set the url where you will redirect the user after the authentication
                $rootScope.returnToState = toState.name;

                // Redirect to the login page
                $state.go('login');    

            } 

            if(isLogged && toState.name === 'login'){

                event.preventDefault();

                // Redirect to the homepage if the page is the login and
                // you are already logged in
                $state.go('home');

            }

        });

    };

    // Dependencie injection
    Init.$inject = [
        '$rootScope',
        '$state'
    ];

    // Module declaration
    app.run(Init);

The login controller will be quite easy here, but you can do whatever you want to provide an authentication and save all parameters that you need

    // Login Controller
    var LoginCtrl = function($scope, $rootScope, $state){

        // Share methods
        $scope.authenticate = function(){

            // Do whatever you want to validate credentials

            localStorage.setItem('auth', true);

            var redirectPath = angular.isUndefined($rootScope.returnToState) ? 'home' : $rootScope.returnToState;

            $state.go(redirectPath);

        };

    };

    // Dependencie injection
    LoginCtrl.$inject = [
        '$scope',
        '$rootScope',
        '$state'
    ];

    // Module declaration
    app.controller('LoginCtrl', LoginCtrl);