Cordova Ionic logout and refresh controllers

Question

I've been struggling quite some time with an ionic app. I have multiple controllers, multiple html pages.

Whenever I log off (I use the controller of the sidemenu) I want to return to the first page. Whenever I am on the first page I want to be able to login a different user. Whenever I enable cache:false in the UI-router of the target view (menu.landingMenu) it simply won't go to that page after the logout.

This is the code for the logout.

 $scope.logOff = function () {

    appData.clear();
    $http.get(appData.hostURL + '/api/Account/logoff.aspx');
    $scope.$destroy();
    $localStorage.$reset();
    CredentialService.del();
    $state.go('login', { action: 'logoff' });
    $timeout(function () {
        $ionicHistory.clearCache();
        $ionicHistory.clearHistory();
    }, 1500)

}

This is the event in the loginController

 // Check if a state change happened
    $scope.$on('$stateChangeSuccess',
        function onStateSuccess(event, toState, toParams, fromState) {
            console.log(fromState);
            console.log('This is the Fromstrate'), fromState;
            console.log(toParams);
            if (toState.name == "login") {
                if (toParams.action == "logoff") {
                    // keep startup url (in case your app is an SPA with html5 url routing)
                    var initialHref = window.location.href;

                    function restartApplication() {


                        // Show splash screen (useful if your app takes time to load
                        // Reload original app url (ie your index.html file)

                        console.log("THis is a reload")
                        document.location.href = 'index.html';
                    }

                    restartApplication();
                } else {
                    var storedCreds = CredentialService.get()

                }
            }
        }
    );

First of all, whenever I logout, and I press the submit button on the page of the login, it "refreshed" the page, it blincks shortly but does not react.

Whenever I click it a second time, it goes to the next page but wont reload the controller, thus rendering no data.

Hiraqui Hiraqui · Accepted Answer · 2017-01-03T19:45:40

There are several things to improve or refactor in the code.

In a single page app you don't want to refresh the page, always find a way to clean the state, cache, etc. So avoid using window.location to switch between views to reset the app. Use the clean functions you have to reset the state like:
localStorage.clear(); CredentialService.del(); etc.
Avoid destroyig the scope manually while it's executing a function and try to work around the cache: false that does it automatic.
Clear the ionicHistory and cache when entering the login or index view instead of inside the logOff function.
If needed, use the ionic events to execute functions: $ionicView.beforeEnter, $ionicView.beforeLeave, etc. http://ionicframework.com/docs/api/directive/ionView/
Chain promises to follow an order if possible.

Your $scope.logOff could look something like:

$scope.logOff = logOff;
function logOff() {
    $http.get(appData.hostURL + '/api/Account/logoff.aspx')
         .then(clearDataAndLeave);
         .catch(someErrorFunction)
}
function clearDataAndLeave(){
    appData.clear();
    $localStorage.$reset();
    CredentialService.del();
    //other cleaning actions
    $state.go('login');    
}

And in you login/index controller:

$scope.$on("$ionicView.beforeEnter", activate);
function activate(event, data){
    $ionicHistory.clearCache();
    $ionicHistory.clearHistory();
    //Then you can handle the credentials, asking if they were deleted or something like that
    var storedCreds = CredentialService.get();
    if (storedCreds){
        //login or sthg else
    }
});

Cordova Ionic logout and refresh controllers

1 Answers