I need some help with an classic web application layout where we deal with an public area (login, lost password, registration) and an member area.
the public area has no navbar on top and no navbar on left side (classic menu).
after a user has logged in, he has a layout with a navbar on top, a navigation menu on left and a main content.
how is the best way to handle this? with one router and layouts? with 2 routers?
I have tried 2 approaches. Both work, but none satisfy me:
First approach, I setRoot to a root page. root.html only contains a <router-view>. Login / register / whatever is loaded there.
After logging in, app.html will be loaded into that <router-view>.
Inside app.html, I have navbar, sidebar, footer, a <router-view> for breadcrumb, and another <router-view> for subpages.
Pros: easy to wrap our head around, I guess…
Cons: all my authenticated routes are prepended with /app/, which is not too terrible but annoying
Second approach, I setRoot directly to app page. app.html contains everything like above (navbar, sidebar, footer, and 2 <router-view>'s), but only the main is visible until user has logged in.
Pros: simple structure, no prepended route
Cons: uhm, my navbar et al. showed up fractions of a second before the login screen is replaced with the authenticated home screen, which is not too terrible but also annoying
You should be able to handle it with a single router. It’s hard to say what you really need since there are many questions that would need to be answered but one way you can look into is handling the showing of your nav items within your app.js/html and show/hide based on whether the user is authenticated <nav if.bind="isAuthenticated"></nav>. Note that using if.bind rather than show.bind will remove it from the DOM rather than setting display:none. Then in your routed viewmodels, look into canActivate hooks (see http://aurelia.io/docs/plugins/dialog#lifecycle-hooks) to allow/disallow viewing of those ViewModels. You could also setup a base class to handle any canActivate() methods on all the ViewModels that require it so you can keep it DRY.
I haven’t used multiple viewports before. Could you give an example of what the routes would look like given what you’ve defined here. I also don’t see any documentation for explicitViewPorts. Is this an old router value? Would this be handled differently now?