Securing Your Application
Our navigation menu has a set of ng-show directives on the elements that check
whether the current user has relevant authorization, and then shows or hides the
menu items accordingly.
<ul class="nav" ng-show="isAuthenticated()">
<li ...><a href="/projects">My Projects</a></li>
<li ... ng-show="isAdmin()">
<a ... >Admin ...</a>
<ul ...>
<li><a ... >Projects</a></li>
<li><a ... >Users</a></li>
</ul>
</li>
</ul>Here, you can see that the whole navigation tree is hidden if the user is
not authenticated. Further, the admin options are hidden, if the user is not
an administrator.
Creating a login toolbar
We can create a reusable login-toolbar widget directive that simply displays
a Log in button if no one is logged in, or the current user's name and a Log out
button, if someone is logged in.
Here is the template for this directive. It injects the currentUser and security
service onto the directive's scope, so we can display user information, as well as
show or hide the Log in and Log out buttons.
<ul class="nav pull-right"><li class="divider-vertical"></li><li ng-show="isAuthenticated()">
<a href="#">{{currentUser.firstName}} {{currentUser.lastName}}</a>
</li><li ng-show="isAuthenticated()">
<form class="navbar-form">
<button class="btn" ng-click="logout()">Log out</button>
</form>