$sessionStorage should return a promise

[darkbasic]

Right now if you set $sessionStorage values then call $http immediately, sessionStorage is not updated in the request. if $sessionStorage returns before saving the sessionStorage in the browser then we need callback to execute code that relies on sessionStorage.
It either need to not set the Session Storage asynchronously or provide a call back function.

[egilkh]

It does not set any cookie at all. sessionStorage is local to browser and should not be updated in any request.

Can you clarify a little what function you would like to have return a promise?

[darkbasic]

Sorry, I just edited my first message (I asked for a similar feature for $cookies and I misstyped my last sentence): angular/angular.js#6411

My use case is simple: as soon as the user logs in I get a sid which I want to save in the session/local storage and then I want to immediately call the rest api, putting my sid in the headers. Without a promise $http gets called before the session/local storage gets written, which turns out in a bad authentication because of lack of sid.

[egilkh]

Where you get value to inject into your requests you should be able to use the value straight away:

Login Controller / Service would do something like this

$sessionStorage.SID = 'mah-side';

and in the $http interceptor would do something like this

return {
      request: function (config) {
        config.headers = config.headers || {};
        config.headers.SID = $sessionStorage.SID;
        return config;
     }
};

As they both now should use the same $sessionStorage they should both have the same value even before the value is synched with window.sessionStorage.

Something to that effect?

[darkbasic]

I'm currently using the same $sessionStorage ( restService.getDataFromApis() uses restService.resource() ) but the value is not synced.

//SERVICE

this.resource = function () {
    return resource();
}

this.retrieveSidFromRestApi = function () {
    return retrieveSidFromRestApi();
}

this.setSid = function (sid) {
    return setSid(sid);
}

this.getSid = function () {
    return getSid();
}

function resource(api) {
    return $resource(cfg.server_url + api + ':id', {}, {
        query: {
            method: 'GET',
            headers: {'SID': getSid()},
            isArray: false
        }
    });
};

function retrieveSidFromRestApi(data) {
    return resource(cfg.api.login).save(data,
        function (response) {
            setSid(response.data.sid);
        }, function (error) {
            console.log("Authentication error");
        }).$promise;
};

//just in case I want to switch from sessionStorage to cookies
function setSid(sid) {
    $sessionStorage.SID = sid;
};

//just in case I want to switch from sessionStorage to cookies
function getSid() {
    return $sessionStorage.SID;
};



//CONTROLLER

restService.retrieveSidFromRestApi(data).then(function () {
    restService.getDataFromApis([cfg.api.api1, cfg.api.api2]).then(function (data) {
        console.log("Successfully received api1 and api2.");
    });
});

[egilkh]

Are you sure your resource function gets called again and returns a new $resource with the correct headers when you attempt to use the getDataFromApis function?

If you get the same resource as you did during the retrieveSidFromRestApi function then it was configured with headers: {'SID': getSid()} which would have evaluated to undefined because $sessionStorage.SID was not initialized before the $resource was created.

This http://plnkr.co/edit/Qrkl7lUD7tzmyI1OnxtC?p=preview shows that there is no problem setting it in a resource and consuming it right away. I used a run function instead of a controller.

[darkbasic]

You're right, my code works. Last time I tried it probably didn't because I was using a separate service for my resource function. Anyway I still think you should add a $promise property to $sessionStorage (like $resource does) to handle such cases.

[austbot]

You should close this issue.