Search code examples
meteoriron-routermeteor-accounts

Setting different routes dependent on if user logged in Meteor


I am trying to get my head around setting different master route templates for account holders and guests. I cannot seem to render different templates (two different nav bars) dependent on whether a user has logged in or not. I have set up a template for guests

//guest.js 
<template name="unregistered">
       {{>navUnreg}}
  <div class="container">
      {{>about}}
  </div>
</template>

<template name="navUnreg">
    <nav class="navbar navbar-default">
      <div class="container">
        <ul class="nav navbar-nav">
          <a class="navbar-brand" href="#">CabStack</a>
        </ul>
        <ul class="nav navbar-nav navbar-right">
           {{>loginButtons}}
        </ul>
      </div>
    </nav>
</template>

This is the generic about page for users that are not logged on. I then have the template for Account users that have logged in which is -

//UserLoggedIn.js
<template name="cabMaster">
    {{>cabNav}}
  <div class="container">
    {{>yield}}
  </div>
</template>

I initially tried to place an if/else statement into a Router configure -

//config.js
Router.configure({
  if(Meteor.user()){
    layoutTemplate: "cabMaster"
  }
  else{
    layoutTemplate: "unregistered"
  }
});

However I keep getting thrown an error. I have already used the Router.onBeforeAction on the userLoggedIn.js page to restrict access to routes until a profile page is filled out which is

//Access rights for logged in users
function userNoAccess(){
  if(!Meteor.userId()){
    alert("restricted until profile page completed");
    this.render(“profile”);
    return pause();
  } else {
    this.next();
  }
}

//Do not allow access to nav links until user has filled out ‘profile’ page. 
Router.onBeforeAction(userNoAccess, {
  only: ["dashboard", "edit_dashboard", "help"]
});

So

I did think about placing the userLoggedIn route in the Accounts.onLogin() function that I have in my client.js file but I want to keep all routes in one place. Does anyone have any suggestions as to how I might achieve this. Thanks


Solution

  • There are several ways to go about this. You don't have to do everything in the router for example. The choice of navbar can happen right in your template:

    <template name="navBar">
      {{#if currentUser}}
        {{> navReg}}
      {{else}}
        {{> navUnreg}}
      {{/if}}
    </template>
    

    This is quite convenient when you're trying to alter little parts of your layout without switching out the whole layout.

    I suggest you look at using controllers for dealing with authenticated and unauthenticated routes. They make your routing code much more maintainable. I've written a basic tutorial that you might find helpful.