CODEWITHSUNDEEP
ember.jsember-data
kfir124
kfir124

Reputation: 1306

How to client side authentication with Emberjs

First of all I don't use Ruby nor Devise :) (all my searches led me to plugins that kind of rely on Devise)

I want to do pretty simple authentication with Ember, I have a REST backend that blocks requests without a proper cookie(user-pass) and i want Ember to watch when it gets 403 forbidden (won't let you to transition into protected URLs) and then pop up a user-login dialog.

So when a user tries to send a new message for example(lets say i've built a forum) Ember will fire the request and if it gets 403 it will block the transition and popup a login form and will retry the transition after the login have completed

Also is there a way to get the errors from ember-data and respond to them? (if a user tries to change an attribute he can't access i would like to inform him about it[Access denied or something like that]) I want to use custom errors that my server will send to ember data not just error numbers but words like "Sorry you can't change this before 12 PM"

Upvotes: 1

Views: 308

Answers (1)

Nadeem
Nadeem

Reputation: 36

You can simply listen to the response of your server and transition to your LOGIN (or whatever you call it) route. In my apps I happen to keep two types of routes (LOGIN and AUTHENTICATED). When they access the authenticated routes without logging in, they get a 401 unauthorized error and get transitioned to the LOGIN route. 

// AuthenticatedRoute.js

redirectToLogin: function(transition) {
    // alert('You must log in!');
    var loginController = this.controllerFor('login');
    loginController.set('attemptedTransition', transition);
    this.transitionTo('login');
},

events: {
    error: function(reason, transition) {
        if (reason.status === 401) {
            this.redirectToLogin(transition);
        } else {
            console.log(reason);
            window.alert('Something went wrong');
        }
    }
},

model: function () {
    return this.store.find('post'); 
},

So now when the user requests for post he gets a 401 and gets transitioned to LOGIN controller. 

// LoginController.js

login: function() {

var self = this, data = this.getProperties('username', 'password');

// Clear out any error messages.
this.set('errorMessage', null);

$.post('/login', data).then(function(response) {

  self.set('errorMessage', response.message);
  if (response.success) {
    alert('Login succeeded!');

    // Redirecting to the actual route the user tried to access
    var attemptedTransition = self.get('attemptedTransition');
    if (attemptedTransition) {
      attemptedTransition.retry();
      self.set('attemptedTransition', null);
    } else {
      // Redirect to 'defaultRoute' by default.
      self.transitionToRoute('defaultRoute');
    }
  }
});

}

The basic answer you need is capturing the events in the route and transitioning accordingly. I just happened to include the code for attempted transition as it comes in handy at times.

Upvotes: 2

Related Questions