Backbone.js How to track logged in user status and general advice on app structure

I was wondering how can I track the current logged in user in a backbone.js app, Most of the views on the page need to know if the user is logged in or now and which user is logged in. What is the best method to achieve this?

I have session management on the server but how do I know which user am I dealing with in my backbone app and how do I know if he logged out thats the question

Also how do I know that a user has logged out using another tab etc? There should be a generic way to handle this stuff, like we have before filters in rails to manage such things. What method is used to achieve the same on the front end.

What I am currently doing is that when the homepage loads I have set from my server side rendered html a hidden field #current_user_id, which the my backbone app reads and sets a variable like the follwoing

window.MyApp =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}
  currentUser: null
  init: -> 
    @currentBusiness = $('#current_business').val()
    new MyApp.Routers.Businesses
    Backbone.history.start()

$(document).ready ->
  MyApp.init()

Then my router sets up a ShowView which then sets ups other sub views on the page

class MyApp.Routers.AppRouter extends Backbone.Router
  routes:
    '': 'show'

  show: ->
    user = new Vocallocal.Models.user id: Vocallocal.currentBusiness
    Vocallocal.currentBusiness = business
    new Vocallocal.Views.BusinessesIndex model: business
    business.fetch()

Here is the main ShowView

class MyApp.Views.ShowView extends Backbone.View 

  el: '#main'
  template: JST['users/home'] 

  initialize: ->
    @model.bind 'change', @render, @
    @details = new Vocallocal.Views.UserDetails model: @model 
    @logo = new Vocallocal.Views.UserLogo model: @model 
    @managePhotos = new Vocallocal.Views.ManagePhotos model: @model 

  render: -> 
    console.log('change has occured') 
   @

does the above code and setup makes sense. I am looking on general advice if I should make any changes to the above.

Thank you for you valuable input

--Abid

Answers


I also battled wrapping my head around authentication when developing client side apps. If you have ever worked with a 3rd party API (Facebook, Twitter) you will know that all authentication is done on the server side. Thats why @Pointy is correct. No authentication is done client side.

So If you are looking to access a secure part of your API, your username and password must be sent with every request, and checked on the server. This is definitely not the most secure way, and there are very few ways to get around this without an HTTPS connection. I am not sure what language you are developing your API in, but still this link is a very good read. Steve basically uses a simple protocol whereby the client sends an authorization token as a header in the HTTP request, and the server decodes that token to decide whether or not it is valid.

In answering your question, I would check if the user is valid. If he/she is, bootstrap your user model with an authentication token. This authentication token will be sent and decoded with every api request that requires authentication. I am no expert, so if there is any other way, please let me know. I am also still learning this.


Our app is a fully separated client/server API architecture, including login.

When a user authenticates and authorizes with our server we send a JSON request with the relevant data over an HTTPS connection (this means due to CORS & IE, that our backend and our front end have to be served from the same site).

The backend returns an auth token.

Every authentication-required REST API requires this token to be sent along as an Authorization header over an HTTPS AJAX request. The server is set to reject any tokens not provided by our mechanism, and reject any connections from pages which aren't served by our severs.

We store this auth token in a cookie on the client side. If the auth token is invalid, missing, etc, our server returns an HTTP 401 which we trap and redirect the client to the login page if it occurs.


Need Your Help

Update multiple fields on MySQL DB in a single query

mysql

Here is the structure of my database named employee

Concat Minified files & skip Minification using Grunt

angularjs gruntjs bundling-and-minification grunt-usemin grunt-contrib-concat

Currently I writing a Grunt Build file ; which uses "usemin" I have created 3 Blocks in HTML which would create 3 files assets.min.js , lib.min.js etc..