Backbone.js forces login

Question

I am developing an application in which my user must log in, in this sense, logging in is slightly different, since the user is not registered for the review. They enter their name and the name of the room, after which they connect. The room itself contains all the settings necessary for users, for example:

• Room Name
• View settings - enable or disable settings
• etc...

So what I want to do is connect to the route event, so I can force the user to go to the /login root if they are not logged in.

Of course, there must be a DRY way to do this without adding a conditional to each route?

Answer 1

The only option that comes to my mind is to overwrite the current Router.route function, currently it looks like this :

 route: function(route, name, callback) { if (!_.isRegExp(route)) route = this._routeToRegExp(route); if (!callback) callback = this[name]; // this is of interest Backbone.history.route(route, _.bind(function(fragment) { var args = this._extractParameters(route, fragment); callback && callback.apply(this, args); this.trigger.apply(this, ['route:' + name].concat(args)); Backbone.history.trigger('route', this, name, args); }, this)); return this; }, 

What you want to do is wrap each callback with a function that checks to see if the condition you want is met and then either bypasses or redirects to login. The underline wrap function is useful here.

 route: function(route, name, callback) { ... // same as above if (!callback) callback = this[name]; _.wrap(callback, function(cb) { if (userIsLoggedIn()) { cb(); } else { this.navigate("url/to/login"); } }); ... // same as above }, 

Of course, you need to add a check for the actual entry route so that you don't create an infinite loop!

EDIT:

You do not need to change the source, the easiest way to do this:

 var CustomRouter = Router.extend({ route: function() { // your overwrite here } }); 

Use this over the comment as it is native to Backbone!

Hope this helps

Answer 2

The backbone router has an execute method that you can override. It is called every time a route is mapped, before a callback is called:

 var Router = Backbone.Router.extend({ execute: function(callback, args) { // Do what you want here! if (callback) callback.apply(this, args); } }); 

This method was added with the release of 1.1.1 on February 13, 2014.

Answer 3

I would like to expand on @jakee's answer and @Joel Nation's comment. I had problems making this work on the affected routes, as expected. I get "this is undefined". Below is the final code that made it work:

  Backbone.Router.prototype.route = function(route, name, callback) { if (!_.isRegExp(route)) route = this._routeToRegExp(route); if (_.isFunction(name)) { callback = name; name = ''; } if (!callback) callback = this[name]; // here my custom code callback = _.wrap(callback, _.bind(function(cb) { if (name == 'login' || sessionModel.authenticated()) { _.bind(cb, this)(); } else { this.navigate('login', {trigger: true}); } }, this)); // finish my custom code var router = this; Backbone.history.route(route, function(fragment) { var args = router._extractParameters(route, fragment); callback && callback.apply(router, args); router.trigger.apply(router, ['route:' + name].concat(args)); router.trigger('route', name, args); Backbone.history.trigger('route', router, name, args); }); return this; }; 

Pay attention to _.wrap and _.bind , so this is the one you expect.

Answer 4

In the code that initializes the application:

 // Initialize router(s) Backbone.history.on("route", function() { if (!authenticated) Backbone.history.navigate("/login", true); }); Backbone.history.start();