I am working on an Ionic app with a side menu that is used for multiple pages. I want to customize the links in the side menu depending on whether the user is authenticated or not. This is how I have set up my routes:
module.export = angular.module('coop').config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//side menu
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'templates/main.html',
})
.state('main.public', {
url: '/public',
views: {
'content': {
templateUrl: 'templates/public.html',
controller: 'PublicController'
}
},
authenticate: false
})
.state('main.articles', {
url: '/articles',
views: {
'content': {
templateUrl: 'templates/articles.html',
controller: 'ArticlesController'
}
},
authenticate: true
})
The links in the side menu should change based on the authenticate property of each state. How can I implement this logic in the side menu?
<ion-side-menus>
<ion-side-menu side="left" class="side-menu" scroll="false">
<ul class="menu">
<div class="side-menu-header">
</div>
<div class="menu-main">
<li>
<a ng-if="authenticated" menu-close ui-sref="main.profile">My Profile</a>
<a ng-if="!authenticated" menu-close ui-sref="main.login">Log In</a>
</li>
</div>
<div class="menu-last">
<li>
<a ng-if="authenticated" menu-close ui-sref="main.logout">Log Out</a>
</li>
</div>
</ul>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="content"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
Update
If anyone else faces this issue, I managed to solve it by setting a rootscope variable on $stateChangeStart event in the app.js:
// Check for login status when changing page URL
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
var currentRoute = toState.name;
$rootScope.authenticated = false;
if ($auth.isAuthenticated()) {
$rootScope.authenticated = true;
}