Render Complete Layouts with Iron Router

My login template is completely different from the navigation layout I’m using, and I want the user only to be able to see the login screen and not the navigation layout.

I made it work with Spacebars helpers, but it makes for messy code, especially when I need to do something similar with account-verification.

Is it possible to render complete layouts with Iron Router, and do an onBeforeAction on those layouts?

So for example, if a user wants access to any template within the main app layout and that user isn’t logged in, then it would render the login layout. It would work the same way if a user wanted to reset their password.

Check out layouts from the docs. You can set a global layout, as well as individual layouts per route.

Also, check out hooks where you can check if the user is logged in, if not then redirect to the login page. Make sure to add the except option in there so it doesn’t cause an infinite loop on the route you redirect to.

1 Like

Thanks a bunch! So you’re saying that layouts work just like normal routes, with respect to onBeforeAction? I can just choose which layouts to render based on certain conditions, like a normal route?

Bump
Up
My
Post.

So from your original question, if a user went to the login page, the route might look like

Router.route('/login', function() {
    this.layout('SessionsLayout');
    this.render('Login');
});

This would use the SessionsLayout template as a layout, which has a {{> yield}} in it that renders the Login template specified by your route. Same thing goes for when they go to the reset password route:

Router.route('/reset_password', function() {
    this.layout('SessionsLayout');
    this.render('ResetPassword');
});

Then for everything else (routes for when a user is logged in), you can configure a global layout:

Router.configure({
    layoutTemplate: 'ApplicationLayout'
});

A layout in this case is just a template with some HTML structure with a {{> yield}} in it that renders the current template for any route that uses that layout. So you can have a separate layout for your login page, and a separate layout that includes your navigation/header/etc once your user is logged in.

Hope this makes sense?

1 Like

It does, thanks so much!