Angular dealing with incorrect cached data

Question

Okay this might be a long post but please do not click away you may know a simple answer.

The case:

Lets say you have build an angular app where people log into the system do some operations and then might log out again. The application will collect data from an API using a factory and service and in order to make the application load even faster you save these data in variables like such:

app.factory("divisionService", function (api, $http, $q) {
var division = {};
var divisionArray = [];
var mergedUserList = [];
return {
    getList: function () {
        var d = $q.defer();
        if (divisionArray <= 0) {
            $http.get(api.getUrl('divisionWithUsers', null))
                .success(function (response) {
                    divisionArray = response;
                    d.resolve(divisionArray);
                });

        }
        if (divisionArray.length > 0) {
            d.resolve(divisionArray);
        }
        return d.promise;
    },

This will make sure that if the user attempts to use a controller that uses the divisionService then that user will instantly get the data if it is already fetched.

The issue:

Now the user log's out and another user logs in (without refreshing / reloading ) the page. Once the controller calls this factory it already thinks that it has the correct list meaning that return would be the same as the previous user however this data might be incorrect!

Since all angular services are singletons the service will not be destoryed upon logout even though it should.

The obvious answer

An answer to this question might be: "Well then don't store the data in a variable" and since this will work enormous amount of data might make content of the page load slowly.

So my question is what do you do in the above situation? do you really have to deal with loading the data every time it is request or does angular provide a smart way to solve this problem?

Answer 1

Create a clear() function

Add a clear() function to your divisionService factory which will be responsible to empty the cached data structures (arrays, objects, ...)

app.factory("divisionService", function () {
    var division = {};
    var divisionArray = [];
    var mergedUserList = [];
    return {
        clear: function(){
            // Clear the cached data

            for (var key in division)
            {
                delete division[key];
            }

            divisionArray.length = 0;

            // ...
        },
        getList: ...
    }
});

And call this function from when you logout

function logout(){
    divisionService.clear();
}

Refresh the application

You can also refresh the entire application when you logout if you don't want to deal with clearing the cached data (e.g. calling divisionService.clear())

function logout(){
    $window.location.reload();
}

this will cause the entire application to be reloaded, and all of the temporary (variable based) cached data will be cleared

Answer 2

Marc,

My first thought is just run divisionArray = [];

On logout. Let me know if that works. If not, I'll look into it further.

Answer 3

You can cache the user information as well and compare it to see if the user has changed before deciding to refresh the data.