I need a systematic redirection to a login page when user is not authenticated. For that purpose, beforeModel in the application route seemed to be the best option, but it seems that beforeModel is not triggered for all transitions, unlike willTransition, which is always called, but when the route is exited, not entered...
For instance, beforeModel is not called when changing the URL manually.
I've read this Gist which explains that willTransition is always called, which I confirm, but it doesn't explain if beforeModel should always be called or not, and in which conditions.
I'm using Ember 1.2.0 beta 3 but I have the same problem with 1.1.2 and login redirection is actually handled by ember-simple-auth (my issue on the repo: #27).
Could someone explain when should beforeModel be called ?
Note : I've asked the same question on Ember Discuss but had no answer.
I'm on 1.1.0-beta.4 and beforeModel works fine. beforeModel should be called in any case like URL change or a transition with a model (e.g. via link-to). The model hook is skipper if we use link-to or transition from a controller.
To get more info and help with debugging set LOG_TRANSITIONS
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
Related
I am writing a EmberJS web application. I have a piece of code which should run only when the page has completed loaded and the session authentication is complete.
I tried setting an observer on session.isAuthenticated but it does not seem to be working.
Any thoughts?
Thanks
You can use didTransition hook of the particular route. You need to define it in actions hash, and dont forget to return true for bubbling to the parent route.
Inside didTransition hook, if you want to run some thing after the page has been rendered, then you can try,
Ember.run.schedule("afterRender",() => {
//you code
});
I've been looking around on Google and Stack Overflow for an answer to this: with Ember-cli 2.10, how can I set up a single callback in the Router, which gives me information about the previous and current URL, as well as the name of the Route about to be called? I'd like to pass all 3 of those to an analytics platform.
Every example I've found has either depended on deprecated Ember features, or just plain hasn't worked as expected. Love to hear an answer on this. Also happy to hear what a better design might be, given the above analytics requirements.
All your requirements will be covered in Public Router Service pull request. It includes properties currentRouteName, currentURL, location, rootURL and transitionTo method.
It's in canary build, not yet production ready. to play you need to enable this feature config/environment.js
"FEATURES": {
"ember-routing-router-service": true
}
You can just inject router service anywhere and get the properties.
router: Ember.inject.service(),
Twiddle Copied From Miguel Camba
I'm using Ember 1.13.3, and somehow I noticed now that Route is also singleton (?), just like controller.
I was checking it because I notice a bug in my app since I upgraded to 1.13.3, and to confirm my suspicion I added console.log in the init method..., and saw that init method is called only once for the route (I switched to another route and wend back).
Is it new (in Ember 1.13, and onward) ?
I need the confirmation if route is really singleton now, in order to rule out the possibility that this behavior I was observing was due to certain (mis)programming (my code).
Thanks,
Raka
As I understand from the EmberJS Guide to Routing, you should specify the model you want a route to load in the Route's model hook. The model hook may return a promise, and if it does, the route will pause until the promise resolves.
Therein lies my problem: this approach works fantastically under normal use cases (user triggers a transition from any other route into the route in question.) The problem arises if the user is currently at the route in question.
If the user triggers a page refresh (using the browser's refresh button, or ctrl+r or whatever other trigger there might be, the promise in the model hook causes the user to sit at a blank white page until that promise returns. In large dataset cases, this can be a handful of seconds, which does not make for a great user experience.
So, how do I resolve this issue?
The only solution I have developed is to trigger the data load in the route's activate hook, and manually set the controller's model when that promise returns. I don't like doing this, because I'm circumventing the entirety of Ember's model framework.
I would like the application template to render before the model hook hangs the page, at a bare minimum. Any guidance on how to resolve this would be greatly appreciated.
In case the context is necessary: as the tags imply, I am using Ember-Data. I'm utilizing the RESTAdapter almost entirely out-of-the-box, unmodified.
Routes have sub-states that can be used to render a temporary template while the model is loading. See: http://guides.emberjs.com/v1.10.0/routing/loading-and-error-substates/
The first load/initial blank page is a UX problem that will be solved by Fast Boot, see: http://emberjs.com/blog/2014/12/22/inside-fastboot-the-road-to-server-side-rendering.html
Fast boot is already available through one of Ember's branches, I don't know the name.
In Angular the $routeProvider resolve property allows delaying of route change until data is loaded. Given the route model hook in Ember returns a promise I was wondering how that stuff was done in Ember
Here it's what I mean in angular Delaying AngularJS route change until model loaded to prevent flicker
A link with a sample code would be great
Just recently this PR introduced Async transitions to ember.js. With this change you can do all sort of things, like for example delaying a route's transition if data is still underway. A route has now all sorts of hooks available to do just want you want.
As an example (taken from the gist mentioned below) in the afterModel hook you could do something like this to only transition to the post.show route if you actually have data:
App.PostsIndexRoute = Ember.Route.extend({
afterModel: function(posts, transition) {
if (posts.length === 1) {
this.transitionTo('post.show', posts[0]);
}
}
});
Since this new features are still very young you need to use the latest master to have it available. For more info on how to use the API please see this gist.
Hope it helps