ReactJS + flux - how to handle session-like parameters (pseudoauthorization) - reactjs

Question

Here's the usecase:
I have 2 components in my reactjs application. Both components are fed with data from remote server - via websockets. I don't want my components nor stores to be aware of data source - all websocket logic resides in ActionCrators and something I call SocketListeners.
Here's the example of such a listener:
var listen = function (socket) {
socket
.on(Messages.LIGHTS_CHANGED, function (newConfiguration) {
AppDispatcher.dispatch({
type: LightActionTypes.SUBSTITUTE_LIGHT_CONFIGURATION,
payload: newConfiguration
});
})
};
module.exports = {
listen: listen
};
Since it is a websocket, I need to know the remote url.
I'd like to ask my user to provide this url on my home page - and before that, my components (actually - routes) should not be available and user should be redirected to the page where he is able to specify this URL.
So I need something which looks like a login flow - but instead of login and password, remote url is crucial property here.
How would you manage this session-like state?
I tried something like this:
In my form-like home view I have a function:
handleConnectionConfirmed: function(event) {
event.preventDefault();
ActionCreator.saveRemoteUrl(
this.state.remoteUrl
);
},
which causes to update my ConfigurationStore:
var _lightsUrl = '';
var _temperatureUrl = '';
var ConfigurationStore = {
lightsSocketEndpoint: function () {
return _lightsUrl;
},
temperatureSocketEndpoint: function () {
return _temperatureUrl;
}
};
And then both my components have:
componentWillMount: function () {
ActionCreator.init();
},
Init function:
init: function () {
_socket = WebSocketFactory.lightsWebSocket();
SocketListener.listen(_socket);
},
One last snippet:
lightsWebSocket: function () {
return io.connect(
ConfigurationStore.lightsSocketEndpoint()
)
},
The problem is: as soon as I refresh any page, of course my ConfigurationStore is cleared.
How can I make it somehow persistent without using an external storage?
Also, do you know how can I configure react-router so that it could redirect me to 'login' page when no remote url is specified and user tries to open site where one of those components resides?

Answer 1

Use LocalStorage or SessionStorage. For example:
In your store's constructor do:
_lightsUrl = localStorage.getItem('lightsUrl') || '';
And in the dispatch handler of the store:
_lightsUrl = newLightsUrl;
localStorage.setItem('newLightsUrl');
Here's a nice tutorial which does authentication this way (don't mind the 'Rails' part): http://fancypixel.github.io/blog/2015/01/29/react-plus-flux-backed-by-rails-api-part-2/