Ember protect multiple templates

1

I’m fairly new to ember and are trying to create a app with a user login. I have solve this by using Auth0 and after entering credentials the user is redirected to protected.hbs. My question is how I make other templates inside of the login also protected. The protected route look like this:

import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin);

and the protected controller like this:

import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service()
});

I tried to generate for example protected/user-page but on the generated user-page I don’t seem to be able access the session from the controller. Of course I could create a controller for every page but that don’t seems like a good way of solving it. Is there a better more efficient way of protecting pages under protected? To make protected/user-page inherent the protected status from it’s parent and also be able to access data from the session.

Sorry if it’s a simple question but I’m really new to this and I haven’t been able of find information about it elsewhere.

2

No problem. It takes some time to learn where to find thing in Ember. In this case you just have to add a authenticated-route-mixin to the routes you want to protect. See:

Edit: See it in action https://bloggr.exmer.com

3

What I do is adding a whitelist config to EmberEnv. Then in the router.js, you can add a guard as part of the Router#willTransition hook. If the route does not require login, then do nothing. If a route requires login and user already logged in, then do nothing. If the route requires login and the user is not, you can redirect to login page from here.

If you need to send an HTTP request to check login status, you can Transition#abort the current transition, make the check, then Transition#retry if needed.