Backbone + Marionette + RequireJS + Session (Authentication)

1
votes

Update - 2013-07-31

So, giving a quick update to what I did to pull this off. It will require 4 pieces (Marionette/Backbone only, you will still need the web service replying to sessions requests) to effectively work. I created a Gists for anyone to look at. Feel free to update the gists and I'll pull the code, granted that it's free of bugs.

I use jQuery, require.js, text require.js plugin, handlebars and moment.js. main.js includes all hooks for using handlebars to load the template from disk or cache, instead of embedding them into the HTML at runtime, and providing a helper to use momentjs in the temlate. If you have any questions, feel free to post them up.

Gists: https://gist.github.com/dkleehammer/6126639

Update!!

I believe I have come up with a working solution. I will continue to test and will pass to the creator and see if he wants to look it over and add it to his blog. I've seen a bunch of questions related to backbone and authentication, hopefully this will help anyone else out.

Original!!

I'm having trouble with server-side session handling and backbone + marionette. I have a session model that I'm basing this application off of. The session carries data such as authenticated flag, session id, user id, etc.

I've attempted to do this many ways, but I still run into a single problem; a split second timing issue where we are waiting on the server to respond with the current session status and the router is trying to decide if we need to be sent to the login page or to view in a specfic region. Once authenticated (after login, of course) I'm sent to the index hashtag, but if I refresh the page that fraction of a second the model returns as undefined and returns to the login hashtag. This is a problem for anything else that uses the session model data during rendering.

What is the best way to do a server-side session application with marionette? Does someone have a good example of using routing and server-side session with backbone+marionette?

3
sessionbackbone.jsmarionetteserver-sidejquery-cookie
Curious if you have a link to your code where we could have a look at your solution - Brian
@Brian, I went ahead and created a gists on github.com. You'll need to setup a few things to get it to work, but it's mainly just a helper to see the important things of the session handling. Mainly I don't call App.start() until there is a change to the session model using the auth module. Let me know if you have any questions. - dkleehammer

3 Answers

1
votes

For those who are interested, I have come up with a working example of server-side session application using Backbone Marionette based on my recent work.

Repository with instructions to run the example: https://github.com/michael-lee/loopback-example-backbone-marionette

This example backend uses LoopBackJS which is a Node.js server with authentication support, but any other backend that provides a login REST API and protects data access using authorization token would be ok. When there is no user logged in or the token expires, requests to the backend fail with HTTP 401 errors.

The Marionette app stores the token returned in login response and sends this token in all subsequent requests. It persists the token using jquery.cookie, and so it is preserved across page reloads and browser restarts. Before the app starts, it first checks if it already has a valid token. Then it starts the app and router. If it does have a valid token, it goes to the authenticated page directly. After authenticated, at any point in time, if a 401 error occurs (e.g. the session expires), the app intercepts the error using $.ajaxSetup and kicks the user back to the login page.

0
votes

You could send a synchronous request to the server thanks to the ajax jquery function and the async : false option :

$.ajax
  ({
    type: "GET",
    url: "login.php",
    dataType: 'json',
    async: false,
    data: '{"username": "' + username + '", "password" : "' + password + '"}',
    success: function (){
      // go wherever you want...
    },
    error: function(){
      // go to login page
    }
});
0
votes

I would solve this by printing the session data (authenticated flag, session id, user id, etc.) to the page instead of doing an extra ajax query.

window.userdata = {"username": Marcus, "password" : 'user_id': 12343}' etc.

And remove that after you used it in your script.