on the client side

account-index.jsx

/* global window */
var React = require('react/addons');
var ReactRouter = require('react-router');
var Routes = require('./Routes.react');
var MeStore = require('../../stores/Me');
var MeActions = require('../../actions/Me');
var RedirectActions = require('../../actions/Redirect');


var HistoryLocation = ReactRouter.HistoryLocation;


var App = {
    blastoff: function () {

        MeActions.loadMe();

        if (!MeStore.hasCredentials() ||
            !MeStore.canPlayRole('account')) {

            RedirectActions.saveReturnUrl();

            window.location.href = '/login';
            return;
        }

        var self = this;

        ReactRouter.run(Routes, HistoryLocation, function (Handler) {

            self.mainElement = React.render(
                <Handler />,
                window.document.getElementById('app-mount')
            );
        });
    }
};

App.blastoff();

me-actions.js

/* global window */
var Dispatcher = require('flux-dispatcher');
var Constants = require('../constants/Me');


var ActionTypes = Constants.ActionTypes;
var dispatch = Dispatcher.handleAction;


var Actions = {
    saveMe: function (data) {

        dispatch(ActionTypes.SAVE_ME, data);

        window.localStorage.setItem('me', JSON.stringify(data.me));
        window.localStorage.setItem('authHeader', data.authHeader);

        dispatch(ActionTypes.SAVE_ME_RESPONSE, data);
    },
    loadMe: function (data) {

        dispatch(ActionTypes.LOAD_ME, data);

        var me = window.localStorage.getItem('me');
        var authHeader = window.localStorage.getItem('authHeader');
        var response = {
            user: undefined,
            session: undefined,
            authHeader: undefined
        };

        if (me && authHeader) {
            try {
                me = JSON.parse(me);
                response = me;
            }
            catch (error) {
                // c'est la vi
            }
        }

        dispatch(ActionTypes.LOAD_ME_RESPONSE, response);
    },
    unloadMe: function (data) {

        dispatch(ActionTypes.UNLOAD_ME, data);

        window.localStorage.removeItem('me');
        window.localStorage.removeItem('authHeader');

        dispatch(ActionTypes.UNLOAD_ME_RESPONSE, data);
    }
};


module.exports = Actions;

me-store.js

var Dispatcher = require('flux-dispatcher');
var FluxStore = require('flux-store');
var CloneDeep = require('lodash/lang/cloneDeep');
var MeConstants = require('../constants/Me');


var ActionTypes = MeConstants.ActionTypes;


var Store = FluxStore.extend({
    dispatcher: Dispatcher,
    state: {},
    defaultState: {
        hydrated: false,
        user: undefined,
        session: undefined,
        authHeader: undefined
    },
    getState: function () {

        return this.state;
    },
    reset: function () {

        this.state = CloneDeep(this.defaultState);
    },
    hasCredentials: function () {

        return Boolean(this.state.user && this.state.session);
    },
    canPlayRole: function (role) {

        if (!this.state.user ||
            !this.state.user.roles ||
            !this.state.user.roles[role]) {

            return false;
        }

        return true;
    },
    onDispatcherAction: function (payload) {

        var action = payload.action;

        if (ActionTypes.LOAD_ME_RESPONSE === action.type) {
            this.state.hydrated = true;
            this.state.user = action.data.user;
            this.state.session = action.data.session;
            this.state.authHeader = action.data.authHeader;
            this.emitChange();
        }

        if (ActionTypes.UNLOAD_ME_RESPONSE === action.type) {
            this.state.hydrated = false;
            this.state.user = undefined;
            this.state.session = undefined;
            this.state.authHeader = undefined;
            this.emitChange();
        }
    }
});


module.exports = Store;

xhr-helper.js

/* global window */
var Xhr = require('xhr');
var Qs = require('qs');


module.exports = function jsonFetch(options, callback) {

    var config = {
        url: options.url,
        method: options.method,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    };

    if (options.query) {
        config.url += '?' + Qs.stringify(options.query);
    }

    if (options.data) {
        config.body = JSON.stringify(options.data);
    }

    if (options.useAuth) {
        var authHeader = window.localStorage.getItem('authHeader');
        config.headers.Authorization = authHeader;
    }

    Xhr(config, function (err, response, body) {

        if (err) {
            callback(err);
        }
        else if (response.statusCode >= 200 && response.statusCode < 300) {
            callback(null, JSON.parse(body));
        }
        else {
            var httpErr = new Error(response.rawRequest.statusText);
            callback(httpErr, JSON.parse(body));
        }
    });
};